How to fix Error: Objects are not valid as a React child in React

ReactINTERMEDIATEMEDIUMUpdated Dec 10, 2025· 149 views

This error occurs when you try to render a JavaScript object or array directly as a React child. React expects primitive values (strings, numbers) or valid React elements, not plain objects or unserializable data structures.

Quick fix

Fixes Error: Objects are not valid as a React child

Error: Objects are not valid as a React child (found: object with keys {id, name}). If you meant to render a collection of children, use an array instead.
  1. Identify the problematic object in your component
  2. Extract the specific property you need
  3. Use .map() to render arrays of objects
  4. Handle Date objects by converting to string
react — error
Error: Objects are not valid as a React child (found: object with keys {id, name}). If you meant to render a collection of children, use an array instead.
Error: Objects are not valid as a React child

What this error means

React children must be serializable values like strings, numbers, or React components. When you attempt to render a JavaScript object, array, Date, Promise, or any non-serializable value directly in JSX, React cannot convert it to DOM content and throws this error. This is a type safety mechanism that catches common mistakes where developers forget to extract specific properties or map over arrays before rendering.

Typical symptoms

  • Application crashes or fails to render with a TypeError in the console
  • Error message shows 'object with keys {property1, property2}' indicating what object was attempted to be rendered
  • Page displays error overlay in development mode showing the problematic component
  • Console shows the exact line in your component where the invalid child was rendered

Common causes

  1. Attempting to render a plain JavaScript object directly: {user} instead of {user.name}
  2. Rendering an array without using .map(): {items} instead of {items.map(item => <div>{item}</div>)}
  3. Rendering a Date object directly: {date} instead of {date.toLocaleDateString()}
  4. Wrapping a variable in double curly braces by mistake: {{message}} instead of {message}
  5. Rendering an async function or Promise result directly in JSX without awaiting in useEffect
  6. Passing an API response object as a child instead of extracting the needed property
  7. Rendering Object.keys() or Object.values() directly without mapping over the result

How to fix "Error: Objects are not valid as a React child"

1Identify the problematic object in your component

Look at the error message in your browser console. It will show the component name and line number where the invalid object was rendered. The error message may also display 'object with keys {key1, key2}' to help identify what object is being rendered.

Example error:

bash
Error: Objects are not valid as a React child (found: object with keys {id, name}). If you meant to render a collection of children, use an array instead.
2Extract the specific property you need

If you're rendering an object, access the specific property you want to display instead of the entire object.

Before:

jsx
const user = { id: 1, name: 'John', email: 'john@example.com' };
return <div>{user}</div>; // Error!

After:

jsx
const user = { id: 1, name: 'John', email: 'john@example.com' };
return <div>{user.name}</div>; // Works!
3Use .map() to render arrays of objects

When you have an array of objects, use the .map() method to render each item as a React element.

Before:

jsx
const items = [{id: 1, text: 'Apple'}, {id: 2, text: 'Banana'}];
return <ul>{items}</ul>; // Error!

After:

jsx
const items = [{id: 1, text: 'Apple'}, {id: 2, text: 'Banana'}];
return (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
); // Works!
4Handle Date objects by converting to string

Date objects must be converted to a string representation before rendering.

Before:

jsx
const date = new Date();
return <p>Today is {date}</p>; // Error!

After:

jsx
const date = new Date();
return <p>Today is {date.toLocaleDateString()}</p>; // Works!
// Or use toISOString(), toString(), etc.
5Fix double curly braces (object literals)

Using double curly braces {{}} creates an object literal, which is not valid as a child. Use single braces {} for variable interpolation.

Before:

jsx
const message = 'Hello';
return <div>{{message}}</div>; // Error!

After:

jsx
const message = 'Hello';
return <div>{message}</div>; // Works!

Note: Double braces are only valid when passing inline styles:

jsx
return <div style={{ color: 'red' }}>{message}</div>; // OK - style prop expects an object
6Handle async functions and Promises correctly

Never render a Promise or async function result directly. Use useEffect or event handlers to resolve the Promise first.

Before:

jsx
const fetchData = async () => {
  return await fetch('/api/data');
};
return <div>{fetchData()}</div>; // Error! fetchData returns a Promise

After:

jsx
const [data, setData] = useState(null);

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('/api/data');
    const result = await response.json();
    setData(result);
  };
  fetchData();
}, []);

return <div>{data ? data.message : 'Loading...'}</div>; // Works!
7Convert Object.keys() or Object.values() results

Object.keys() and Object.values() return arrays, which need to be mapped to render individual items.

Before:

jsx
const user = { name: 'John', age: 30 };
return <div>{Object.keys(user)}</div>; // Error!

After:

jsx
const user = { name: 'John', age: 30 };
return (
  <div>
    {Object.keys(user).map(key => (
      <p key={key}>{key}: {user[key]}</p>
    ))}
  </div>
); // Works!

Advanced notes

In TypeScript projects, you can prevent this error at compile time by using proper typing. Ensure your component's children prop is typed as ReactNode, ReactElement, or a similar valid type. For complex data structures, consider using the Fragment component (<>) to wrap multiple children, or separate your data rendering logic into helper functions that explicitly map objects to React elements.

When working with third-party libraries that return objects (like some API response wrappers), check the library documentation for the correct way to extract the renderable content. Some libraries may have a .data property, .content property, or similar that contains the actual value meant for rendering.

React's error messages have improved over time. If you see 'object with keys {...}' in the error, that's helpful debugging information—it tells you exactly what object was being rendered. Use this to trace back to the parent component that passed that object as a child.

Frequently asked questions

What does "Error: Objects are not valid as a React child" mean?
React children must be serializable values like strings, numbers, or React components. When you attempt to render a JavaScript object, array, Date, Promise, or any non-serializable value directly in JSX, React cannot convert it to DOM content and throws this error. This is a type safety mechanism that catches common mistakes where developers forget to extract specific properties or map over arrays before rendering.
How do I fix "Error: Objects are not valid as a React child"?
This error occurs when you try to render a JavaScript object or array directly as a React child. React expects primitive values (strings, numbers) or valid React elements, not plain objects or unserializable data structures.
What causes "Error: Objects are not valid as a React child"?
Attempting to render a plain JavaScript object directly: {user} instead of {user.name} Rendering an array without using .map(): {items} instead of {items.map(item => <div>{item}</div>)} Rendering a Date object directly: {date} instead of {date.toLocaleDateString()}
Is the "Error: Objects are not valid as a React child" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading