# react/no-children-prop

> Disallow passing `children` as a 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.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

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

Every option, set to its default:

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

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
const card = <Card children={<Avatar user={user} />} />;
```

{/* bad */}
```jsx
const title = React.createElement("h1", { children: "Settings" });
```

Not reported:

{/* good */}
```jsx
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:

{/* good {"options": [{"allowFunctions": true}]} */}
```jsx
const size = <Measure children={width => <Chart width={width} />} />;
```

And the nested form is reported:

{/* bad {"options": [{"allowFunctions": true}]} */}
```jsx
const size = <Measure>{width => <Chart width={width} />}</Measure>;
```