react/no-react-children

Children.map, Children.count, and the other Children methods look at the JSX a component was given, not at what it renders. If you wrap one of the children in another component or a fragment, the count and the mapping change. Passing the data as a prop doesn't break this way.

The rule reports a call on Children when Children, or the object it's read from, is imported from "react".

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/no-react-children" = "error" # or "warn"

Examples#

Reported:

import { Children } from "react";

function Menu({ children }) {
  return (
    <ul>
      {Children.map(children, child => (
        <li>{child}</li>
      ))}
    </ul>
  );
}

import React from "react";

function Tabs({ children }) {
  return <p>{React.Children.count(children)} tabs</p>;
}

Not reported:

function Menu({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.label}</li>
      ))}
    </ul>
  );
}