API

Avoid passing children as props

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

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

How to use this rule

1
2
rulesets:
  - tsx-react     # Rules to enforce TypeScript react.

Create a static-analysis.datadog.yml with the content above at the root of your repository
Use our free IDE Plugins or add Code Analysis scans to your CI pipelines
Get feedback on your code

For more information, please read the Code Analysis documentation

VS Code Extension

Identify code vulnerabilities directly in your
VS Code editor

JetBrains Plugin

Identify code vulnerabilities directly in
JetBrains products