Invariant Violation: Objects are not valid as a React child

Sometimes you might try to display data in a React application and you might see the following error in the console:

Objects are not valid as a React child (found: object with keys ...). If you meant to render a collection of children, use an array instead.

Printing Objects

Consider the following code:

1function App() {
2  const name = { first: "John", last: "Doe" }
3
4  return <div className="App">{name}</div>
5}
6
7export default App

If you execute the following code in your react application, you will see the following error in the browser console:

This happens because we are trying to print the whole object instead of the values inside it. We can fix this by printing the first name and and last name separately as shown below:

1function App() {
2  const name = { first: "John", last: "Doe" }
3
4  return (
5    <div className="App">
6      {name.first} {name.last}
7    </div>
8  )
9}
10
11export default App

Displaying Date

If you use the following code to display the date, you will receive the same error:

1function App() {
2  const date = new Date()
3
4  return <div className="App">{date}</div>
5}
6
7export default App

Here, date is an object. To receive the date in string format, we can use method like toLocaleDateString():

1function App() {
2  const date = new Date()
3
4  return <div className="App">{date.toLocaleDateString()}</div>
5}
6
7export default App

Extra curly braces

If you add extra curly braces while printing a variable, you will end up with the same error:

1function App() {
2  const counter = 10
3
4  return <div className="App">{{ counter }}</div>
5}
6
7export default App

When you use the additional curly brace, it becomes a short-hand notation for object. That is, it can be expanded as {counter: counter}. Hence it is treated as an object. We can fix this by removing the additional curly brace:

1function App() {
2  const counter = 10
3
4  return <div className="App">{counter}</div>
5}
6
7export default App

Displaying a jsx array

If you have a list and created an array of JSX to render as shown below, again you will face the same issue:

1function App() {
2  const list = ["foo", "bar"]
3
4  const jsxToRender = list.map(item => <li>{item}</li>)
5
6  return { jsxToRender }
7}
8
9export default App

You can fix this by enclosing the returned value inside a ul element or by just returning jsxToRender without curly braces.

1function App() {
2  const list = ["foo", "bar"]
3
4  const jsxToRender = list.map(item => <li>{item}</li>)
5
6  return <ul>{jsxToRender}</ul>
7}
8
9export default App

Missing the curly braces

If you are having a separate function to display the data and you are sending the values in a object and receiving them as shown below, you will face the same issue:

1const Name = (first, last) => {
2  return (
3    <div>
4      {first} {last}
5    </div>
6  )
7}
8
9function App() {
10  return (
11    <>
12      <Name first={"John"} last={"Doe"} />
13    </>
14  )
15}
16
17export default App

You can fix it by doing object destructuring as shown below:

1const Name = ({ first, last }) => {
2  return (
3    <div>
4      {first} {last}
5    </div>
6  )
7}
8
9function App() {
10  return (
11    <>
12      <Name first={"John"} last={"Doe"} />
13    </>
14  )
15}
16
17export default App

Do follow me on twitter where I post developer insights more often!