Objects are not valid as a React child React error

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Objects are not valid as a React child React error #

The React.js error "Objects are not valid as a React child" occurs when we try to directly render an object or an array in our JSX code. To solve the error, use the map() method to render arrays or access properties on the object in your JSX code.

objects are not valid as react child

Here is an example of how the error occurs.

App.js
export default function App() { const employees = [ {id: 1, name: 'Alice', country: 'Austria'}, {id: 2, name: 'Bob', country: 'Belgium'}, {id: 3, name: 'Carl', country: 'Canada'}, ]; const obj = { id: 4, name: 'Dean', country: 'Denmark', }; // ⛔️ Uncaught Error: Objects are not valid as a React child (found: object with keys {id, name, country}). // If you meant to render a collection of children, use an array instead. return ( <div> {employees} {obj} </div> ); }

The issue is that we are trying to directly render an array or an object in our JSX code.

To solve the error, use the map() method to render an array or access properties on the object when rendering it.

App.js
export default function App() { const employees = [ {id: 1, name: 'Alice', country: 'Austria'}, {id: 2, name: 'Bob', country: 'Belgium'}, {id: 3, name: 'Carl', country: 'Canada'}, ]; const obj = { id: 4, name: 'Dean', country: 'Denmark', }; return ( <div> {employees.map((employee, index) => { return ( <div key={index}> <h2>name: {employee.name}</h2> <h2>country: {employee.country}</h2> <hr /> </div> ); })} <hr /> <hr /> <hr /> <div> <h2>name: {obj.name}</h2> <h2>county: {obj.country}</h2> </div> <hr /> </div> ); }

When debugging, console.log() the value that is causing the error.

Alternatively, you can JSON.stringify() the value in your JSX code to make sure it is of the expected type.

App.js
export default function App() { const employees = [ {id: 1, name: 'Alice', country: 'Austria'}, {id: 2, name: 'Bob', country: 'Belgium'}, {id: 3, name: 'Carl', country: 'Canada'}, ]; const obj = { id: 4, name: 'Dean', country: 'Denmark', }; return ( <div> <h4>{JSON.stringify(employees)}</h4> <h4>{JSON.stringify(obj)}</h4> </div> ); }

The JSON.stringify() method will convert the object into a string before it is rendered.

You have to make sure that you aren't rendering an object or an array in your JSX code. Instead you have to render primitive values like strings and numbers.

Another common cause of the "Objects are not valid as a React child" error is trying to directly render a Date object in our JSX code.

App.js
export default function App() { const date = new Date(); // ⛔️ Objects are not valid as a React child (found: [object Date]). return ( <div> <h4>{date}</h4> </div> ); }

To get around this, access a method on the Date object, e.g. toLocaleDateString().

App.js
export default function App() { return ( <div> <h4>{date.toLocaleDateString()}</h4> </div> ); }

The error is solved because we are now rendering a string instead of an object.

If the error persists, make sure you aren't using double curly braces when rendering a variable.
App.js
export default function App() { const message = 'hello world'; // ⛔ Objects are not valid as a React child (found: object with keys {message}). return ( <div> <h4>{{message}}</h4> </div> ); }

Notice that the message variable is wrapped in 2 sets of curly braces which is why React thinks we are trying to render an object.

To solve the error, wrap variables in a single set of curly braces only.

App.js
export default function App() { return ( <div> <h4>{message}</h4> </div> ); }

Now React treats the message variable as an expression containing a string instead of an object.

If the error persists, make sure you aren't calling an async function in your JSX code.

Async functions return a Promise object, so if you call one in your JSX code, the error occurs.

App.js
export default function App() { async function getData() { return Promise.resolve(42); } // ⛔ Objects are not valid as a React child (found: [object Promise]). return ( <div> <h4>{getData()}</h4> </div> ); }

To solve the error, we have to call the async function inside of the useEffect hook or in an event handler, e.g. onClick.

App.js
import {useEffect, useState} from 'react'; export default function App() { const [num, setNum] = useState(0); useEffect(() => { async function getData() { const result = await Promise.resolve(42); setNum(result); } getData(); }, []); return ( <div> <h4>{num}</h4> </div> ); }
Calling the async function in our useEffect hook solves the error because we are now rendering a number and not a Promise object.

The React error "Objects are not valid as a React child" occurs for multiple reasons:

  • Rendering an object or an array directly in your JSX code
  • Rendering a Date object directly in your JSX code
  • Wrapping a variable in two sets of curly braces, e.g. {{message}} instead of {message}
  • Calling an async function in your JSX code
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.