1

I'm trying to understand why es6 object spread behaviour is different between objects and when it's used in React components to spread props.

The following makes sense to me:

const a = {
  a:1,
  b:2
}

const c = {...a}

Now variable c will have the same properties as variable 'a' with key value pairs in this format of a:1, b:2.

This doesn't make sense:

<Mycomponent {...a} />

turns the props into "a={1} b={2}". Why does it behave in this way instead of the usual way which is key value pairs a:1, b:2?

I would like to understand why this works like this so I can better understand the language.

I've seen tutorials and articles which explain how spread works in both cases but I haven't found an answer why it spreads differently?

Improve this question
10
  • Because these are two different operators working on different objects. Both are "spread" but they are not the same "spread". Consider the + operator on numbers and then consider what it does on strings. Commented Nov 4, 2020 at 18:50
  • Does this answer your question? What do these three dots in React do? Commented Nov 4, 2020 at 18:51
  • Thanks @Sulthan I think understanding that they are not the same type of spread is the key for me understanding this, I thought they are the same thing and should behave the same way. Commented Nov 4, 2020 at 18:58
  • @jobe Also note how spread works on arrays and function arguments. It's still spreading something, but everytime it does it differently. Commented Nov 4, 2020 at 19:18
  • @Sulthan in those cases it didn't confuse me as arrays are a different type of object but in this case the props object seems like a regular object as I described 'a' in my question, so I would expect them to spread in the same way as well. Commented Nov 4, 2020 at 22:53

1 Answer 1

Reset to default
1

<Mycomponent {...a} />

turns the props into "a={1} b={2}". Why does it behave in this way instead of the usual way which is key value pairs a:1, b:2?

But it is doing key/value pairs of a:1 and b:2. The following code...

<Mycomponent a={1} b={2} />

... tells react to create a props object that looks like { a: 1, b: 2 }. And when you use the spread syntax, it also tells react to create a props object that looks like { a: 1, b: 2}.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I don't understand the last part of what you wrote, both examples you're giving are telling React to create a props object? but when you use the spread syntax, how is that props object being spread turned into a={1} instead of a:1
Props is always an object. The familiar way to create that object is to use JSX syntax and "a={1} b={2}".This may not look like an object, but it is. This code is telling react to create the object { a: 1, b: 2}. how is that props object being spread turned into a={1} Since "a={1}" means "an object with a: 1", nothing needs to be done. It's already an object, and you're just making a copy of it.
Try it out yourself: on babeljs.io/repl, paste in <Mycomponent a={1} b={2} />, and see what it gets transpiled to. You'll see that it created an object { a: 1, b: 2 }
Thanks for clarifying, I think one of the other comments helped me understand by explaining it's a different type of spread operator and that made it clearer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.