Sometimes, we want o fix Objects are not valid as a React child. If you meant to render a collection of children, use an array instead with JavaScript.
In this article, we’ll look at how to fix Objects are not valid as a React child. If you meant to render a collection of children, use an array instead with JavaScript.
How to fix Objects are not valid as a React child. If you meant to render a collection of children, use an array instead with JavaScript?
To fix Objects are not valid as a React child. If you meant to render a collection of children, use an array instead with JavaScript, we should make sure we only render valid JSX in our React component.
For instance, we write
export default () => {
//..
return (
<div className="col">
<h1>Mi Casa</h1>
<p>This is my house y'all!</p>
{homes.map((home) => (
<div>{home.name}</div>
))}
</div>
);
};
to render elements an an array that returns an array of elements in our component.
We call map with a callback to render the homes array into an array of elements that can be rendered with React.
They’re all valid JSX code so no error will be thrown.
Conclusion
To fix Objects are not valid as a React child. If you meant to render a collection of children, use an array instead with JavaScript, we should make sure we only render valid JSX in our React component.
