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.

JavaScript React Basics Introducing Props Iterating and Rendering with map()

karan Badhwar
seal-mask
.a{fill-rule:evenodd;}techdegree
karan Badhwar
Web Development Techdegree Student 15,454 Points

Why forEach() is not working

why forEach() is not working and we are not even returning any any array we just make make calls to the <Player /> component ? why only map() is working?

2 Answers

Laura Coronel
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Laura Coronel
Treehouse Teacher

From my understanding the map() method returns an array of <Player /> components like so :

[
<Player name="Guil" score={50} />,
<Player name="Treasure" score={90} />,
<Player name="Ashley" score={85} />,
<Player name="James" score={80} />
]

Babel comes in and transforms this to React.create Element like so:

[
React.createElement(Player, {
  name: "Guil",
  score: 50
}), 
React.createElement(Player, {
  name: "Treasure",
  score: 90
}), 
React.createElement(Player, {
  name: "Ashley",
  score: 85
}), 
React.createElement(Player, {
  name: "James",
  score: 80
})
];

The behind the scenes React takes this array and transforms it to a list of elements. In our example the React.createElement() first parameter is Player which is a functional component that will return the Player component's elements.

I hope this helps!

If you want to learn more here's React's doc on createElement(). And you can even enter your JSX into Babels compiler

Laura Coronel
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Laura Coronel
Treehouse Teacher

Great question karan karan. Behind the scenes React takes the array (created by map() method) and transforms them into a list of elements, in this example: <Players /> components. The forEach() method will not work because it returns undefined. React needs the array provided by map() to create elements which will then be rendered to the browser.

For more resources here's the link to List and Keys in the React docs.

karan Badhwar
seal-mask
.a{fill-rule:evenodd;}techdegree
karan Badhwar
Web Development Techdegree Student 15,454 Points

Laura Coronel, Thankyou for explaining. So basically you are saying when the Babel converts the JSX to React.createElement it stores the method in an anonymous array? but when we called the <Player /> component doesn't it just redirects to the Component and create an element?