Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
Lacking explanation of array magically converted to JSX
The map function returns an array. In the video, this array is not put into an array variable, it just hangs in the air - without explaining how that array somehow ends up being inserted in the React component.
I assume this is some implicit (unexplained in any video?) functionality in JSX, that if you call a function within a JSX expression and it returns an array, then the contents of that array will be automatically converted to a JSX String and injected in the position the function occurs?
I just find this video really confusing due to the teacher skipping the explanation of this...but maybe I missed some point in some video explaining this...
Torben KorbFront End Web Development Techdegree Graduate 90,071 Points
yes this seems confusing. But you are absolutely right with your explanation. The map method returns an array of components (Player here). Those kind of arrays will be flattened out. This is implementation detail of the React.createElement method. JSX only gives you the syntactic sugar to work with it.
More implementation details can be found here: https://reactjs.org/docs/react-api.html#createelement
By the way this comes very handy when programming in React. Even when there are no elements in your array at all it won't render anything and your app won't crash because map returns an empty array which resolves to no children at this point.
Thank you Ryan & Torben for your excellent replies!