What does three dots do in ReactJS

Question

const peopleList = this.state.people.map( x => {

    return <Person key={x.name} {...x} />
})

What does "{...x} " this code mean?

Answer 1

This is a spread operator syntax in react.

From the MDN DOCS:

The spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) or multiple variables (for destructuring assignment) are expected.

In your case <Person key={x.name} {...x} /> It means that send the entire object or properties contained with x as it looks as props to the Person Component

For example if

var x = {
     name: "Hello",
     last_name: "World"

}

Then if you do <Person key={x.name} {...x} />

The above will be equivalent of

<Person key={x.name} name={x.name} last_name={x.last_name}/>

The order in which the spread syntax is used along with the props is also significant.

Consider a case where you pass the props to a component like

var data = {
     name: 'abc',
     age: '25',
     college: 'lmit'
}

and if you use the spread operator syntax like

 <Person key={x.name} name='xyz' {...data} />

Then the prop name='xyz' is overwritten by the key:value pair resolved from data. So the final Person component call will look like

 <Person key={x.name} name='abc' age= '25' college= 'lmit' />

However when you write it like

 <Person key={x.name}  {...data} name='xyz' />

Then the prop name='abc' that is resolved from data is overwritten by name='xyz' that is passed explicitly to Person. So the final Person Component call will look like

  <Person key={x.name} name='xyz' age= '25' college= 'lmit' />

Answer 2

That is the spread operator. It was introduced in ES2015. It takes all the properties of x and distributes them to the element.

{...x} means take all properties assigned to the object x, then assign them to <Person />

You can read more here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator