Avoid passing children as props

Docs > Code Analysis > Static Analysis Rules > Avoid passing children as props

This page is not yet available in Spanish. We are working on its translation.
If you have any questions or feedback about our current translation project, feel free to reach out to us!

Metadata

ID: jsx-react/no-children-prop

Language: JavaScript

Severity: Warning

Category: Best Practices

Description

Children should be used as actual children not a JSX prop. This rule enforces the use of children as an element between the JSX element opening and closing tag.

Non-Compliant Code Examples

<div children='Children' />;

<MyComponent children={<AnotherComponent />} />;
<MyComponent children={['Child 1', 'Child 2']} />;

React.createElement("div", { children: 'Children' });

Compliant Code Examples

<div>Children</div>;
<MyComponent>Children</MyComponent>;
<MyComponent>
  <span>Child 1</span>
  <span>Child 2</span>
</MyComponent>;
React.createElement("div", {}, 'Children');
React.createElement("div", 'Child 1', 'Child 2');