Skip to main content

react/noChildrenProp

prevent passing of children as props

ESLint Equivalent: no-children-prop

Examples

Invalid

<MyComponent children={'foo'}></MyComponent>

 file.tsx:1:13 lint/react/noChildrenProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing children using a prop.

    <MyComponent children={'foo'}></MyComponent>
                 ^^^^^^^^^^^^^^^^

  The canonical way to pass children in React is to use JSX elements or
    additional arguments to React.createElement.


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

 file.tsx:1:28 lint/react/noChildrenProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing children using a prop.

    React.createElement('div', {children: 'foo'})
                                ^^^^^^^^^^^^^^^

  The canonical way to pass children in React is to use JSX elements or
    additional arguments to React.createElement.


createElement('div', {children: 'foo'})

 file.tsx:1:22 lint/react/noChildrenProp ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid passing children using a prop.

    createElement('div', {children: 'foo'})
                          ^^^^^^^^^^^^^^^

  The canonical way to pass children in React is to use JSX elements or
    additional arguments to React.createElement.

Valid

<MyComponent><AnotherComponent /></MyComponent  >
React.createElement('div', {}, 'children')
React.createElement('div', child1, 'child2')