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

Description

Disallow 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

Rule Source
Test Source