React Error Messages and How to Fix Them

Concept lesson · explains an idea. Code is shown for reading, not run.

This is a lookup table. The messages below are the exact texts printed by React 19.3 (development build) when we triggered each mistake in the course playground, plus a few from Vite and Babel. Search the page for the start of your message.

Rendering errors

Message	Cause	Fix
Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.	You put a plain object in JSX: `{user}`	Render a field (`{user.name}`) or `JSON.stringify` for debugging. Rendering Dynamic Values
Each child in a list should have a unique “key” prop. (followed by “Check the render method of `App`.”)	A `map` returns elements without `key`	Add a stable `key={item.id}` to the outer element. Keys
Encountered two children with the same key, `a`. Keys should be unique so that components maintain their identity across updates.	Two siblings share a key	Use unique ids.
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.	A missing `export`, or `import { X }` for a default export (or the reverse)	Match `export default` with `import X from` and named exports with `import { X } from`. Importing and Exporting
X is not defined	A component or variable was used without importing or declaring it, or a typo	Import it or fix the spelling (components are case-sensitive).
Cannot read properties of undefined (reading ‘map’)	`undefined.map(...)`: the data has not arrived or has another shape	Default to `[]`, use `?.`, check loading first. Rendering API Responses
The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + ’em’}} when using JSX.	`style="color:red"`	`style={{ color: "red" }}`. Attributes
Invalid DOM property `class`. Did you mean `className`?	HTML attribute names	Use `className`, `htmlFor`.
In HTML, `<button>` cannot be a descendant of `<button>`. This will cause a hydration error.	Invalid nesting of elements (also `<div>` in `<p>`, `<a>` in `<a>`)	Fix the HTML structure.

State and update loops

Message	Cause	Fix
Too many re-renders. React limits the number of renders to prevent an infinite loop.	A setter was called during render (`setN(n + 1)` in the body, or `onClick={setN(1)}`)	Call setters in handlers or effects: `onClick={() => setN(1)}`. Common Rendering Mistakes
Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn’t have a dependency array, or one of the dependencies changes on every render.	An effect sets state on every render	Add a correct dependency array, remove objects and functions created during render from it, or calculate the value instead. Effect Dependencies
The screen does not update (no message)	State was mutated (`push`, assignment)	Set a new array or object. Avoiding Mutation

Hooks

Message	Cause	Fix
Invalid hook call. Hooks can only be called inside of the body of a function component.	A hook was called outside a component or custom hook, in a class, or there are two copies of React	Call hooks at the top level of components and `use...` functions. Rules of Hooks
Rendered more hooks than during the previous render. (plus “React has detected a change in the order of Hooks called by App”)	A hook is called conditionally and the condition became true	Move the condition inside the hook, or into a child component.
Rendered fewer hooks than expected. This may be caused by an accidental early return statement.	A hook is skipped by a condition or an early `return`	Call all hooks before any `return`.

Forms

Message	Cause	Fix
You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.	A controlled input without `onChange`	Add `onChange`, or use `defaultValue`. Controlled Inputs
A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen.	State started as `undefined` and later became a string	Start with `useState("")`.

Compile-time (Babel in the playground, Vite in a project)

Message	Cause	Fix
Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment `<>...</>`?	Two elements returned side by side	Wrap them in a parent or a Fragment. Fragments
Unexpected token `}`. Did you mean `}` or `{'}'}`? (for example after `<div>;`)	An unclosed tag, so the parser reads the next characters as text	Close the tag.
Unexpected reserved word ‘await’.	`await` outside an `async` function	Make the function `async`, or use `.then`.
Cannot import “x” here. (this course’s playground)	The playground has only `react` and `react-dom`	Use a full project for packages and extra files. Playground Guide

In a Vite project

Message	Cause	Fix
Failed to resolve import “./X” from “src/App.jsx”. Does the file exist?	A wrong path, wrong letter case or missing extension	Check the path and the exact file name.
The JSX syntax extension is not currently enabled (or an “Invalid JS syntax” error in a `.js` file with JSX)	JSX inside a `.js` file	Name files with JSX `.jsx` (or `.tsx`).
`ReactDOM.render is not a function`	Old tutorial code; removed in React 19	`createRoot(...).render(...)`. Rendering Components
Failed to fetch dynamically imported module	A lazy chunk no longer exists after a new deploy	Reload; add an error boundary. Production Errors
Minified React error #NNN	A production build message, shortened	Open the link in the message to read the full text.
Blocked by CORS policy	The API does not allow your site’s origin	Fix on the server or use your own backend. API Security

How to use an error message

Read the whole first message, not only the title.
Find the file and line and the component stack.
Search for a key phrase in this table or on react.dev.
If the message is unclear, reproduce it in a small example in the playground.