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.

To solve this error, make sure you are rendering primitive values like strings and numbers in JSX code. Should not render an object or an array that is non-primitive type into JSX code which may cause this error. 

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 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 types like an array or object. Here is an example that throws an error.

// 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.

In this case, one solution would be:

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

We were given the exact property of the object in the rendering.

Another case in which this error happens is when you use double curly braces when rendering a variable. Here is an example that throws the error.

<p>{{message}}</p>

To solve the error, use only one curly brace to render a variable

<p>{message}</p>

How to render a collection of items in react

To render a collection of items in react we have to use the map() method to loop through and can access properties on the object when rendering it.

Here is an example.

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 error “Objects are not valid as a React child” 

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}.

So make sure the above cases are not happening in the code.

Conclusion

To solve React error "Objects are not valid as a React child", make sure you are only rendering primitive values like strings and numbers in JSX code. JavaScript objects or arrays cannot be rendered as a child in React. To render arrays, first, use map() method to loop through the array elements and then render in it. To render the date object, convert it into a string using toString() method and then render it in JSX.