What does spread operator outside of curly braces do?

Question

This comes from my React project, and is something I’ve never seen before:

const { list, loading, failed } = this.props
return <ExperienceList {…{ list, loading, failed }} />

Specifically, I’m referring to the spread operator OUTSIDE of the curly braces. I’m used to seeing them inside.

Probably it means: 1) pick only those 3 keys from the original props and then 2) do the spreading as usual, i.e. apply those 3 props to the compoment. IMHO — Hero Qu, Aug 16 '19 at 19:30
Possible duplicate of [What do these three dots in React do?](https://stackoverflow.com/questions/31048953/what-do-these-three-dots-in-react-do) — Emile Bergeron, Aug 16 '19 at 19:41
not a duplicate; my question is related to how it works when the '...' is preceded by an object — Tycholiz, Aug 16 '19 at 23:45

score 9 · Accepted Answer · answered Aug 16 '19 at 19:30

9

In your example

return <ExperienceList {…{ list, loading, failed }} />

is equivalent to

return <ExperienceList {…this.props} />

it does the same thing, which is

return <ExperienceList list={list} loading={loading} failed={failed} />

answered Aug 16 '19 at 19:30

Federkun

3

note it's only strictly equivalent to `...this.props` if `this.props` only contains those three keys – Hamms Aug 16 '19 at 19:31
1

yeah, making the assumption that `this.props == { list, loading, failed }` in this case – Federkun Aug 16 '19 at 19:31
so what is the real benefit of writing it this way? – Tycholiz Aug 17 '19 at 01:47
1

the only one I can think is that `this.props` may have many props, but you want to forward only three of them. – Federkun Aug 17 '19 at 01:52

1 Answers1