React props syntax with ES6 spread operator

user_175836 0
Viewed 620

I noticed the following in a React app:

<UserList
  {...{ userIdsTyping, users }}
/>

What exactly is {...{ userIdsTyping, users }} doing here? I understand it's passing children to the UserList component, but how does the spread operator work here? What interaction does it have with userIdsTyping and users?

reactjs ecmascript-6 javascript
1 Answers

The spread operator "expands" the object inline. It's equivalent to the following syntax:

<UserList
    userIdsTyping={userIdsTyping}
    users={users}
/>

The object itself { userIdsTyping, users } is ES6 shorthand, and expands to {userIdsTyping: userIdsTyping, users: users}.

This assumes values for userIdsTyping and users are defined somewhere else within scope.

user_4727680
Related