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

 

Related Blogs

ckeditor

How to Integrate Custom Build CKEditor5 with React

Explains how to create a custom build CKEditor5 and integrate with react with sample code.

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

The tag is unrecognized in this browser

Warning: The tag is unrecognized in this browser

Warning "The tag is unrecognized in this browser" occurs when the tag doesn't exist in the browser or when we render a component starting with a lowercase letter.

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.

Import and export may only appear at the top level

Import and export may only appear at the top level

The error "import and export may only appear at the top level" may occur due to a missing closing brace when declaring a function or class. Explains with an example.