React: 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