Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
GGAlanSmithee opened this issue May 26, 2016 · 5 comments
Closed

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

GGAlanSmithee opened this issue May 26, 2016 · 5 comments

Comments

@GGAlanSmithee
Copy link

GGAlanSmithee commented May 26, 2016

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
Copy link
Contributor

syranide commented May 26, 2016

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
Copy link
Author

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
Copy link
Collaborator

gaearon commented Oct 4, 2017

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

@gaearon gaearon closed this as completed Oct 4, 2017
@gazdagergo
Copy link

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
Copy link

yairEO commented Aug 1, 2021

@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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants