logoESLint React
Rules

no-children-prop

Full Name in eslint-plugin-react-x

react-x/no-children-prop

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-children-prop

Features

🔍

What it does

Disallows passing 'children' as a prop.

Most of the time, children should 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

Failing

import React from "react";
 
interface MyComponentProps {
  children: React.ReactNode;
}
 
function MyComponent({ children }: MyComponentProps) {
  return <div children={children} />;
  //          ^^^^^^^^^^^^^^^^^^^
  //          - Children should always be actual children, not passed in as a prop.
}

Passing

import React from "react";
 
interface MyComponentProps {
  children: React.ReactNode;
}
 
function MyComponent({ children }: MyComponentProps) {
  return <div>{children}</div>;
}

Implementation

Previous

no-children-only

Next

no-children-to-array

On this page