DocumentationRulesno-children-prop

no-children-prop

Rule category

Restriction.

What it does

Disallows passing ‘children’ as a prop.

Why is this bad?

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 ExampleProps {
  children: React.ReactNode;
}
 
function Example({ children }: ExampleProps) {
  return <div children={children} />;
  //          ^^^^^^^^^^^^^^^^^^^
  //          - Children should always be actual children, not passed in as a prop.
}

Passing

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