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
Top comments (0)