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

```jsx
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:


![object invalid child error](https://cdn.hashnode.com/res/hashnode/image/upload/v1660061352055/BeNjeIY9Y.png)
 

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:

```jsx
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:

```jsx
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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString):

```jsx
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:

```jsx
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#new_notations_in_ecmascript_2015). 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:

```jsx
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:

```jsx
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.

```jsx
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:

```jsx
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:

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

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

export default App
```