no-children-to-array

Full Name in eslint-plugin-react-x

react-x/no-children-to-array

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-children-to-array

Presets

x recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

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

Examples

Converting children to an array for manipulation

Using Children.toArray to turn children into an array assumes internal React details that may change. If you need to reorder or filter items, accept structured data as props instead.

For example, if you need to reverse a list, let the parent pass an array prop and use standard array methods:

// Recommended: accept data as an array prop and manipulate it directly
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  const reversed = [...items].reverse();
  return (
    <>
      {reversed.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </>
  );
}

// Problem: Using Children.toArray to convert children into an array for manipulation
import React, { Children } from "react";

interface MyComponentProps {
  children: React.ReactNode;
}

function MyComponent({ children }: MyComponentProps) {
  const result = Children.toArray(children);
  result.reverse();
  // ...
}

Versions

Resources

• Rule Source
• Test Source
• Rule Changelog

Further Reading

• Legacy React APIs: Children

See Also

• react-x/no-children-count
  Disallows the use of Children.count from the react package.
• react-x/no-children-for-each
  Disallows the use of Children.forEach from the react package.
• react-x/no-children-map
  Disallows the use of Children.map from the react package.
• react-x/no-children-only
  Disallows the use of Children.only from the react package.