no-children-prop

Full Name in eslint-plugin-react-x

react-x/no-children-prop

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-children-prop

Features

🔍

Presets

• core
• recommended
• recommended-typescript
• recommended-type-checked

What it does

Disallows passing ‘children’ as a prop.

Why is this bad?

Most of the time, children should be actual children, not passed in as a prop.

When using JSX, the children should be nested between the opening and closing tags. When not using JSX, the children should be passed as additional arguments to React.createElement.

Examples

Failing

import React from "react";
 
interface ExampleProps {
  children: React.ReactNode;
}
 
function Example({ children }: ExampleProps) {
  return <div children={children} />;
  //          ^^^^^^^^^^^^^^^^^^^
  //          - Children should always be actual children, not passed in as a prop.
}

Passing

import React from "react";
 
interface ExampleProps {
  children: React.ReactNode;
}
 
function Example({ children }: ExampleProps) {
  return <div>{children}</div>;
}