React error – objects are not valid as a react child

To solve objects are not valid as a react child error, check if the JSX element has javascript object as child, like this –

const jsobj = {"hello" : "world"};

return (
    <div>
        {jsobj}
    </div>
);

then instead of putting object as child, use JSON.stringify() function and convert object into string, like this –

const jsobj = {"hello" : "world"};

return (
    <div>
        {JSON.stringify(jsobj)}
    </div>
);

Introduction

(Jump to solution) I got this strange error, “objects are not valid as a react child” when I was working on my first React Js project. My project was related to a transcription software. This error came up when I was trying to put a JavaScript object inside my JSX.

Check this demo of how react throws error, objects are not valid as a react child –

Solution

You can not use objects in JSX (What is JSX?). That’s it.

Although, objects can not be used but there are valid ways to use Arrays as a react child.

We generally get response from APIs in JSON. It may contain objects and you might need to show that in jsx. It’s possible.

In our example above, instead of const jsobj = {"hello" : "world"}; if you convert it into array like const jsarr = ["hello", "world"]; then it will work without any issue.

Let’s see this in the code and demo –

const jsarr = ["hello", "world"];
return (
    <div>
        {jsarr}
    </div>
);

Live Demo

We can also use an array of JSX as react child. In fact the map() function returns the array only. Like these code examples are perfectly valid –

const jsarr1 = [
  <span style={{color: 'red'}}>This is span 1</span>,
  ' ',
  <span style={{color: 'green'}}>This is span 2</span>,
  <p>This is a paragraph</p>
];

	
const jsarr2 = [1,2,3,4].map(item => {
  return (
    <p key={item}>I am item {item}</p>
  );
});


return (
  <div>
    <div style={{backgroundColor:'lightyellow'}}>{jsarr1}</div>
    <div style={{backgroundColor:'#f0f0f0'}}>{jsarr2}</div>
  </div>
);

Live Demo

Sometimes we also get the same error like this – “if you meant to render a collection of children, use an array instead.” It means that either you are using objects or you forgot to enclose your components or JSX elements within a parent. Like this –

return (
    <p>This is paragraph 1</p>
    <p>This is paragraph 2</p>
)

The correct way is –

return (
  <div>
    <p>This is paragraph 1</p>
    <p>This is paragraph 2</p>
  </div>
)

You can also use <React.Fragment></React.Fragment> instead of div. With the newer React versions, you may use <></> too.

You may also like –

What if I want to use object as react child since both keys & values are important?

There are ways to tackle this problem. You can run your object against map() function and get the required JSX. But remember to first convert object to an array otherwise map will throw an exception. This code will help you –

const obj = {
	"Name": "Akash Mittal",
	"Startup": "StudyWise",
	"Description": "Kids Education App",
	"Link": "https://play.google.com/store/apps/details?id=com.studywise",
};
			
  return (
    <div style={{
        backgroundColor: 'lightyellow', 
        border: '1px solid yellow',
        padding: '10px',
      }}>
      <table>
        <tbody>
        {
          Object.keys(obj).map(itemKey => {
            return (
              <tr key={itemKey}>
                <td>{itemKey}</td>
                <td>{itemKey === 'Link' ? <a href={obj[itemKey]}>{obj[itemKey]}</a> : obj[itemKey]}</td>
              </tr>
            )
          })
        }
        </tbody>
      </table>
    </div>
  );

Live Demo

You can pass an object or array as props within components also.

Conclusion

You can’t use Javascript object in JSX directly but you can use arrays. So convert your objects into arrays using map() function.