Children.toArray does not return a flat array of all children

[GGAlanSmithee]

So, I would be quite surprised if this is an actual bug, since it would probably have been reported long ago, but in that case I think the documentation can be made more clear, because I cannot interpret the documentation of Children.toArray in any other way than that it is supposed to return all children (including nested ones) as a flat array.

Do you want to request a feature or report a bug?

bug (or unclear documentation)

What is the current behavior?

Children.toArray(this.props.children) does not return a flat array. (or rather returns a flat array, but only including direct children (not nested ones))

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/reactjs/69z2wepo/).

https://jsfiddle.net/9p6yq3bq/

What is the expected behavior?

for Children.toArray(this.props.children) to return a flat array of all children including nested ones

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

"react": "^15.0.2"

documentation

Return the children opaque data structure as a flat array with keys assigned to each child.

release notes from when the API was made public

Added React.Children.toArray which takes a nested children object and returns a flat array [emphasis added] with keys assigned to each child. This helper makes it easier to manipulate collections of children in your render methods, especially if you want to reorder or slice this.props.children before passing it down. In addition, React.Children.map now returns plain arrays too.

[syranide]

It does not pull children out of elements and flatten them, that wouldn't really make any sense. It flattens nested arrays and objects, i.e. so that [['a', 'b'],['c', ['d']]] becomes something similar to ['a', 'b', 'c', 'd'].

React.Children.toArray([['a', 'b'],['c', ['d']]]).length === 4

[GGAlanSmithee]

Thanks for the quick answer @syranide.

I had a feeling it was a missinterpretation on my part. Maybe this could be made more clear in the documentation? Especially the release notes seems a bit confusing, since it actually states that it

takes a nested children object and returns a flat array

[gaearon]

It doesn’t seem like it’s a common point of confusion so I’ll close.

[gazdagergo]

I've just created a recursive jsx mapping function which returns the nested children in a flat array: https://gist.github.com/gazdagergo/7833156e096683b49a21133858d521ca

[yairEO]

@syranide - actually what you said (5 years ago) does not makes sense to me and I do expect the same as OP expected as the name of the method suggests it it traversing all the children in the tree and returns it flat (as per description).