Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
lassek
8,209 PointsLacking 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...
2 Answers
Torben Korb
Front End Web Development Techdegree Graduate 91,433 PointsHi Iassek,
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.
Happy coding!
lassek
8,209 PointsThank you Ryan & Torben for your excellent replies!
Ewerton Luna
Full Stack JavaScript Techdegree Graduate 24,031 PointsGreat question and great answer! Dude deserves a "Best answer"
Ryan Campbell
7,402 PointsRyan Campbell
7,402 PointsI think I see the confusion. After the map() call is done, there's a new array available, but it has the tags, one per item in the initial array, but each item looks like this:
(that's the newly transformed players[0] item)
React is what turns that new array into each separate component and outputs the actual HTML code. That's pretty magical. If we didn't use map() to change each object in the array, React would ignore each item since it only knows how to render things that look like components (Player is one of the ones we defined.) In other words, our map() creates an array of calls to the Player component function, and the React engine looks at each item and runs the component code.
That code above gets translated (by React) to:
Player({name='Guil', score=50})and that's what runs for each array item in the newly mapped array.