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

Steve Gallant
Steve Gallant
14,943 Points
Posted by Steve Gallant
Steve Gallant
14,943 Points

How does the spread operator function here?

Not quite wrapping my mind around how Guil Hernandez is using the spread operator at the end of the video https://teamtreehouse.com/library/one-solution-14. I understand how spread works in general, so wouldn't his example

<Planet
          {...planet}
          key={ planet.id }
        />

translate to something like this?

<Planet
          id: '1',
          name: 'Mercury',
          diameter: '3,031.67 mi',
          moons: 'none',
          desc: 'removed for brevity.',
          url: 'img/mercury.jpg'
          key={ planet.id }
        />

If that's correct, it seems the assignment operator isn't required here? thanks for shedding some light! Steve

2 Answers

Cheo R
Cheo R
37,150 Points
Cheo R
Cheo R
37,150 Points

There are three parts to this:

planet: obj with attributes

{ }: JSX syntax, evaluates js expression during compilation.

...: spread operator.

So you can read it something like

<Planet
    {...planet}
    key={ planet.id }
/>

In the jsx syntax, spread the attributes of the object planet.

<Planet
          id: '1',
          name: 'Mercury',
          diameter: '3,031.67 mi',
          moons: 'none',
          desc: 'removed for brevity.',
          url: 'img/mercury.jpg'
          key={ planet.id }
        />
Steve Gallant
Steve Gallant
14,943 Points
Steve Gallant
Steve Gallant
14,943 Points

OK, so that confirms I understood the spread operator expansion correctly, so perhaps my question is more about JSX syntax (which is new to me).

In the video, Guil used the spread op line to replace several lines that used the assignment operator (as shown with the "key" prop still listed). In JSX, it is OK to use either the "=" or the ":" (object key-value notation) to pass props? thanks for responding! Steve

KWAME ADJEI
KWAME ADJEI
4,627 Points
KWAME ADJEI
KWAME ADJEI
4,627 Points

The resulting example was to show the relationship between having list the props using key=value vs the spread operator.

When passing props in JSX you use one of the following for primitive types:

return (
var isActive = true
<Component
   name="john" // String
   age={22} // Int
   active={isActive} // Var
   loading // Bool defaults to true same as loading={true} />
)

When dealing with objects as props is the only time it's OK to use ":" even then you have to pass the object inside {} brackets as shown below.

<Component
  user={{
    name: "john",
    age: 22,
    active: false
  }}  />
Steve Gallant
Steve Gallant
14,943 Points
Steve Gallant
Steve Gallant
14,943 Points

Thanks for the reply Kwame! So in the video, there are no curly braces (see code above) surrounding the object dot notation lines, which is why I am still confused. The code above is directly from the video...can you explain why it works please? Thanks! Steve