react/no-children-prop

You can write children in two places: between the tags, or as a prop named children. If an element has both, the children between the tags win and the prop is dropped without a warning.

Nest children between the tags. With React.createElement, pass them as the third and later arguments.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/no-children-prop" = "error" # or "warn"

Every option, set to its default:

bunfig.toml

[lint.rules]
"react/no-children-prop" = ["error", {
  allowFunctions = false,
}]

Examples#

example.jsx1 problem

const card = <Card children={<Avatar user={user} />} />;

example.jsx1 problem

const title = React.createElement("h1", { children: "Settings" });

example.jsxNo problems

const card = (
  <Card>
    <Avatar user={user} />
  </Card>
);

const title = React.createElement("h1", {}, "Settings");

Options#

Option	Default	What it does
`allowFunctions`	`false`	Allow a function as the `children` prop, and report a function that's nested between the tags instead.

With allowFunctions, a render function goes in the prop:

example.jsxwith { "allowFunctions": true }No problems

const size = <Measure children={width => <Chart width={width} />} />;

And the nested form is reported:

example.jsxwith { "allowFunctions": true }1 problem

const size = <Measure>{width => <Chart width={width} />}</Measure>;