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

• 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

1 Answer 1

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