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:

function App() {
  const name = { first: "John", last: "Doe" }

  return <div className="App">{name}</div>
}

export 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:

function App() {
  const name = { first: "John", last: "Doe" }

  return (
    <div className="App">
      {name.first} {name.last}
    </div>
  )
}

export default App

Displaying Date

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

function App() {
  const date = new Date()

  return <div className="App">{date}</div>
}

export default App

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

function App() {
  const date = new Date()

  return <div className="App">{date.toLocaleDateString()}</div>
}

export default App

Extra curly braces

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

function App() {
  const counter = 10

  return <div className="App">{{ counter }}</div>
}

export 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:

function App() {
  const counter = 10

  return <div className="App">{counter}</div>
}

export 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:

function App() {
  const list = ["foo", "bar"]

  const jsxToRender = list.map(item => <li>{item}</li>)

  return { jsxToRender }
}

export default App

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

function App() {
  const list = ["foo", "bar"]

  const jsxToRender = list.map(item => <li>{item}</li>)

  return <ul>{jsxToRender}</ul>
}

export 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:

const Name = (first, last) => {
  return (
    <div>
      {first} {last}
    </div>
  )
}

function App() {
  return (
    <>
      <Name first={"John"} last={"Doe"} />
    </>
  )
}

export default App

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

const Name = ({ first, last }) => {
  return (
    <div>
      {first} {last}
    </div>
  )
}

function App() {
  return (
    <>
      <Name first={"John"} last={"Doe"} />
    </>
  )
}

export default App