React objects are not valid as a react child

The React error "Objects are not valid as a React child" occurs when we render an object or an array in our JSX code.  We can't use JavaScript objects as a child in React.

Make sure that you are rendering primitive values like strings and numbers. Should not render an object or an array that is non-primitive type into JSX code.

Let's take an example:

const MyComponent = () => {
	const product = "Shirt";
	return (<div>
		{product}
	</div>)
}

In the above code, the string “shirt” is stored in a variable product  and rendered inside a div. This will work properly because the stored value "Shirt" is a string that is a primitive type. This will also work for other primitive types such as number or undefined.

The issue arises when the variable product has a value of non-primitive type. Please have look at the below example.

// This code will result in an error “Objects are not valid as a React child”
const MyComponent = () => {
	const product = {
		name:"shirt",
		price:100
	};
	return (<div>
		{product}
	</div>);
}

What will be the output of the above code?

It will throw an error Uncaught Error: Objects are not valid as a React child.

In the above code, we are trying to render an object product inside a div. The object has two properties: name and price. React doesn’t know which property of the given object should render.  So react throws an error “Objects are not valid as a React child”. To solve this error, we have to tell React which property of the object and how it should be rendered.

For the above scenario, one solution would be:

const MyComponent = () => {
	const product = {
		name:"shirt",
		price:100
	};
	return (<div>
		{product.name} : {product.price}
	</div>);
}

Rendering a Collection of Items

Let's take another example:

// This code will result in an error “Objects are not valid as a React child”
const MyComponent = () => {
	const products = [
		{ name:"shirt", price:100	},
		{ name:"shoe", price:75	},
	];
	return (<div>
		{products}
	</div>);
}

Here we trying to render an array of objects inside a div which results in an error “Objects are not valid as a React child”.

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

One solution would be:

const MyComponent = () => {
	const products = [
		{ name:"shirt", price:100	},
		{ name:"shoe", price:75	},
	];
	return (<div>
		{products.map((product, index) => {
        	return (
          		<div key={index}>
            		{product.name} : {product.price}
          		</div>
        	);
      	})}
	</div>);
}

Make sure to add a unique key to each element of an array to help React know which elements have been changed, added, or removed. Learn more about keys in react doc.

For debugging, we can use JSON.stringify() it to display an array or object in JSX. It will convert the object into a string before it is rendered as given below.

const MyComponent = () => {
	const products = [
		{ name:"shirt", price:100	},
		{ name:"shoe", price:75	},
	];
	return (<div>
		{JSON.stringify(products)}
	</div>);
}

Rendering Dates in JSX

The Date object is a non-primitive type and it can't be directly rendered in JSX. We have to convert the date object into a string using toString() method.

const MyComponent = () => {
	const today = new Date();
	return (<div>
		<div>{today.toString()}</div>
	</div>);
}

Debugging the Problem

The error “Objects are not valid as a React child” occurs due to many reasons.

1. Rendering an object or array directly in JSX.
2. Trying to render JavaScript Date in JSX. 
   Solution: use toString() method that converts it into a string.
3. Rendering a collection of items without using a .map() function.
4. Calling a function that returns an object or other invalid child.
5. Wrapping a variable in two sets of curly braces, e.g. {{message}} instead of {message}.