If you’re working with React, you might have encountered this error message: React.Children.only expected to receive a single React element child. This means that you’re trying to render a component that expects only one child, but you’re passing more than one. For example, this code will cause the error:
<SomeComponent> <div>First child</div> <div>Second child</div> </SomeComponent>
Some components, like React Router’s or , are designed to work with only one child element. To fix the error, you need to either wrap the children in a single element or use an array to pass multiple children. For example, these two solutions will work:
<SomeComponent> <div> <div>First child</div> <div>Second child</div> </div> </SomeComponent>
<SomeComponent>
{[
<div key="first">First child</div>,
<div key="second">Second child</div>
]}
</SomeComponent>
In this blog post, I explained how to resolve the React.Children.only expected to receive a single React element child error. I hope this was helpful and you learned something new. Happy coding!