no-children-map

Full Name in eslint-plugin-react-x

react-x/no-children-map

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-children-map

Features

🔍

Presets

• core
• recommended
• recommended-typescript
• recommended-type-checked

What it does

Prevents the use of Children.map from the react package.

Using Children is uncommon and can lead to fragile code. See common alternatives.

Examples

Failing

import React, { Children } from "react";
 
interface MyComponentProps {
  children: React.ReactNode;
}
 
function MyComponent({ children }: MyComponentProps) {
  return (
    <div className="RowList">
      {Children.map(children, (child) => <div className="Row">{child}</div>)}
    </div>
  );
}

Implementation

• Rule source
• Test source

Further Reading

• React: Legacy React APIs Children

See Also

• no-children-count
  Prevents the use of Children.count from the react package.
• no-children-for-each
  Prevents the use of Children.forEach from the react package.
• no-children-only
  Prevents the use of Children.only from the react package.
• no-children-to-array
  Prevents the use of Children.toArray from the react package.