# react/no-react-children

> Disallow the `React.Children` methods

`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"`.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

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

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
import { Children } from "react";

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

{/* bad */}
```jsx
import React from "react";

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

Not reported:

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