React props syntax with ES6 spread operator

Question

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?

Answer 1

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.