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

JavaScript One Solution

Jiten Mehta
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jiten Mehta
Front End Web Development Techdegree Graduate 21,209 Points

The use of map in this example

Hey Everyone, I have a question in regards to the use of Map in the exercise.

Usually when I use Map in vanilla JavaScript, I always use the braces, especially if the method will have multiple lines. For example,

const numArr = [1, 2, 3, 4, 5]

const newArr = numArr.map(num => {
return num * 10
})

In the example above, I have used curly braces after the arrow in the map function.

In this exercise, Guil does not use curly braces, instead its the following:

const PlanetList = (props) =>{
  return(
    <div className="container">
      {props.planets.map(planet => 
        <Planet
        {...planet}
        key={planet.id}
        />
      )}
    </div>
  )
}

As you can see above, after the arrow there are no braces to encompass the Planet Component.

I was working through this exercise and because I had the curly braces, the app wouldn't load in the browser. One they where removed, it worked.

Thanks, Jiten.

1 Answer

Blake Larson
Blake Larson
13,014 Points

If it's one line of code inside the map function you can remove the curly braces and return statement in es6. If you want it to work with the curly braces you would just have to use the return keyword.