What do these three dots in React do?

Question

What does the ... do in this React (using JSX) code and what is it called?

Answer 1

spread operator(triple operator) introduce in ecama script 6(ES6).Ecama script(ES6) is a wrapper of javascript.

spread operator enumerable properties in props. this.props = { firstName: 'Dan', lastName: 'Abramov', city: 'New York', country: 'USA' }

{...this.props} = { firstName: 'Dan', lastName: 'Abramov', city: 'New York', country: 'USA' }

But the main feature spread operator is used for a reference type.

For example
let person= {
    name: 'Alex',
    age: 35 
}
person1= person;

person1.name = "Raheel";

console.log( person.name); // output: Raheel

This is called reference type, one object affects other objects because they are shareable in memory. If you getting value independently mean spread memory both use spread operator.

 let person= {
        name: 'Alex',
        age: 35 
    }
person2 = {...person};

person2.name = "Shahzad";

console.log(person.name); // output: Alex