close
Rslint

    no-children-prop

    Configuration

    PresetConfigured Value
    ✅ reactPlugin.configs.recommended"error"
    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:

    <div children='Children' />

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

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

    Examples of correct code for this rule:

    <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

    { "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 }:

    { "react/no-children-prop": ["error", { "allowFunctions": true }] }
    <MyComponent children={() => <div />} />
React.createElement(MyComponent, { children: () => <div /> })

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

    { "react/no-children-prop": ["error", { "allowFunctions": true }] }
    <MyComponent>{() => <div />}</MyComponent>
React.createElement(MyComponent, {}, () => <div />)

    Original Documentation