This es 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.

This es 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.

• javascript
• reactjs

Share Improve this question Follow edited Aug 16, 2019 at 19:31 Get Off My Lawn 36.4k4646 gold badges198198 silver badges376376 bronze badges asked Aug 16, 2019 at 19:27 TycholizTycholiz 1,20055 gold badges1818 silver badges3838 bronze badges 4

• 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 poment. IMHO – Hero Qu Commented Aug 16, 2019 at 19:30
• You are deconstructing the object into another object. – Get Off My Lawn Commented Aug 16, 2019 at 19:30
• 1 Possible duplicate of What do these three dots in React do? – Emile Bergeron Commented Aug 16, 2019 at 19:41
• 1 not a duplicate; my question is related to how it works when the '...' is preceded by an object – Tycholiz Commented Aug 16, 2019 at 23:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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} />