> For AI agents: the complete documentation index is available at https://rslint.rs/llms.txt, the full documentation bundle is available at https://rslint.rs/llms-full.txt.

# no-children-prop

[Added in v0.5.0](https://github.com/web-infra-dev/rslint/releases/tag/v0.5.0)
## Configuration

| Preset                            | Configured Value |
| --------------------------------- | ---------------- |
| ✅ reactPlugin.configs.recommended | `"error"`        |


```ts title=rslint.config.ts
import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/no-children-prop': 'error',
    },
  },
]);
```

## Rule Details

Children should always 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 of **incorrect** code for this rule:

```jsx
<div children='Children' />

<MyComponent children={<AnotherComponent />} />
<MyComponent children={['Child 1', 'Child 2']} />

React.createElement("div", { children: 'Children' })
```

Examples of **correct** code for this rule:

```jsx
<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')
```

## Rule Options

```json
{ "react/no-children-prop": ["error", { "allowFunctions": false }] }
```

### allowFunctions

Default: `false`.

When enabled, function children are required to be passed as the `children` prop rather than nested between tags or passed as an additional `React.createElement` argument. This can be useful for libraries that rely on render-callbacks.

Examples of **correct** code for this rule with `{ "allowFunctions": true }`:

```json
{ "react/no-children-prop": ["error", { "allowFunctions": true }] }
```

```jsx
<MyComponent children={() => <div />} />
React.createElement(MyComponent, { children: () => <div /> })
```

Examples of **incorrect** code for this rule with `{ "allowFunctions": true }`:

```json
{ "react/no-children-prop": ["error", { "allowFunctions": true }] }
```

```jsx
<MyComponent>{() => <div />}</MyComponent>
React.createElement(MyComponent, {}, () => <div />)
```

## Original Documentation

- [eslint-plugin-react: no-children-prop](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.37.5/docs/rules/no-children-prop.md)
- [Source code](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.37.5/lib/rules/no-children-prop.js)