Skip to content

Fix Uncaught Error Objects are not valid as a React child

This error might happen because you’ve got a React component and you’re rendering a prop in the JSX, like this, but you forgot to destructure the prop when initializing the component parameters:

function MyComponent(test) {
	return <p>{test}</p>
}

You should do this instead:

function MyComponent({ test }) {
	return <p>{test}</p>
}

The component receives a props object and we commonly use object destructuring to get the props “mapped” to variables, like {test} in our example.


→ Here's my latest YouTube video

→ Get my React Beginner's Handbook

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list