childrenProps

Reports usage of the children prop.

✅ This rule is included in the jsx stylistic presets.

In JSX, children are generally intended to be passed as content between opening and closing tags rather than as a children prop. This makes the JSX more readable and maintainable by following the standard JSX pattern.

Examples

❌ Incorrect

<div children="Hello" />

<Component children={<span>Test</span>} />;

<button children={["Click me"]} />

✅ Correct

<div>Hello</div>

<Component>
  <span>Test</span>
</Component>;

<button>Click me</button>

When Not To Use It

If you prefer the consistency of always using named props including children over aligning with common JSX conventions, you might prefer to disable this rule.

Further Reading

• React Documentation: JSX In Depth
• MDN: JSX

Equivalents in Other Linters

• Deno: jsx-no-children-prop
• ESLint: react/no-children-prop