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

Steve Gallant
Steve Gallant
14,919 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

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,919 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

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,919 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