Avoid passing children as props

Documentos > 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: tsx-react/no-children-prop

Language: TypeScript

Severity: Warning

Category: Best Practices

Description

The children of a JSX element should appear as elements between the parent’s opening and closing tags, not as props in the opening tag. This rule enforces the use of children as an element.

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');