(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. The project was related to a transcription software. This came up when I was trying to put a JavaScript object inside my JSX. Something like this –

const jsobj = {"hello" : "world"};
return (
    <div>
        {jsobj}
    </div>
);

Check this demo –

Solution

You can not use objects in JSX (What is JSX?). That’s it. If you are getting some data from server, check out if it is json encoded and you are receiving it in the form of JavaScript object. Although, objects can not be used but there are valid ways to use Arrays as a react child.

So, 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>
);

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>
);

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.

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>
  );

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

I hope this article helped you. If you have any query, you can either ask in comment or send me a message directly. See you in the next article.

About the Author

akamit

I am Akash Mittal, an overall computer scientist. If you want to guest post, need help in your projects, want to advertise, Feel free to contact me at [email protected]

View All Articles