When using JSX the component children should be passed between opening and closing tags. Passing children in a children
prop may work
sometimes, but will lead to errors if children are passed both as nested components and children
prop at the same time.
When not using JSX, the children should be passed to createElement()
method as extra arguments after the props
object.
<div children='Children' />
<Foo children={<Bar />} />
React.createElement("div", { children: 'Children' })
To fix the code, remove the children
prop and pass the children between opening and closing JSX tags or as extra arguments to
createElement()
function.
<div>Children</div>
<Foo><Bar /></Foo>
React.createElement("div", {}, 'Children');