React.Children.toArray() Flattens Arrays but Not Fragments; react-keyed-flatten-children Cited as Sole Solution

React's children prop is often an opaque data structure rather than a simple array, which causes issues when developers attempt to manipulate it with standard array methods like slice or filter. While the DOM renders nested structures correctly, direct manipulation of the children prop can yield unexpected results because the underlying data structure retains its nesting. React.Children.toArray() solves this by flattening the children into a 1D array and assigning unique keys to each element for reconciliation purposes. This utility handles cases where children is an object or undefined, preventing runtime errors that occur when calling array methods directly on the prop. The generated keys use a prefix system (e.g., .1:$1_apple) to maintain uniqueness across nested levels. However, a significant limitation exists: React.Children.toArray() does not flatten elements inside React.Fragment. If a fragment contains multiple children, they remain grouped as a single object in the resulting array, which can break logic expecting a fully flat list. The source states that the only solution available so far is to use the third-party library react-keyed-flatten-children. Additionally, the source notes that React.Children utilities are currently in maintenance mode and may be replaced by other utilities in the future.