This content originally appeared on CodeSource.io and was authored by Pandu Rijal Pasa
If you get react.children.only expected to receive a single react element child error, here is how to fix this issue.
The issue happened because the component only expects a single ReactElement to its children. Here is an example that could give you a similar error:
<MyComponent>
<div>First Children</div>
<div>Second Children</div>
</MyComponent>To fix the issue, don’t put more than one element on your children. If you still need to keep those multiple elements as children without any wrapper element, you can use ReactFragment to replace the wrapper. Here is an example to do that:
// using ReactFragment
<MyComponent>
<React.Fragment>
<div>First Children</div>
<div>Second Children</div>
</React.Fragment>
</MyComponent>
// using short syntax of ReactFragment
<MyComponent>
<>
<div>First Children</div>
<div>Second Children</div>
</>
</MyComponent>The post Fix – react.children.only expected to receive a single react element child appeared first on CodeSource.io.
This content originally appeared on CodeSource.io and was authored by Pandu Rijal Pasa
Pandu Rijal Pasa | Sciencx (2021-02-21T12:04:06+00:00) Fix – react.children.only expected to receive a single react element child. Retrieved from https://www.scien.cx/2021/02/21/fix-react-children-only-expected-to-receive-a-single-react-element-child/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.