29 lines
1023 B
Plaintext
29 lines
1023 B
Plaintext
== Why is this an issue?
|
|
|
|
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.
|
|
|
|
[source,javascript,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
<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.
|
|
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
|
----
|
|
<div>Children</div>
|
|
<Foo><Bar /></Foo>
|
|
|
|
React.createElement("div", {}, 'Children');
|
|
----
|
|
|
|
== Resources
|
|
=== Documentation
|
|
|
|
* React Documentation - https://react.dev/learn/passing-props-to-a-component[Passing Props to a Component]
|