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

For those who come from the Python world, JSX Spread Attributes are equivalent to Unpacking Argument Lists (the Python **-operator).

I'm aware this is a JSX question, but working with analogies sometimes helps to get it faster.

Answer 2

Spread Attributes used to Pass the multiple Properties in a Simple Way

{ ... this.props } is Holding the property of this.props

Use of the { ... } Spread Operator with below props

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

Without { ... } Spread

<Child 
  firstName={this.props.firstName}
  lastName={this.props.lastName}
  city={this.props.city}
  country={this.props.country}

> 

With { ... } Spread

<Child { ...this.props } />

Dan Abramov's Tweet about Spread operator (Creator of Redux)

Answer 3

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

Answer 4

This is a new feature in ES6/Harmony. It is called the Spread Operator. It lets you either separate the constituent parts of an array/object, or take multiple items/parameters and glue them together. Here is an example:

let array = [1,2,3]
let array2 = [...array]
// array2 is now filled with the items from array

And with an object/keys:

// lets pass an object as props to a react component
let myParameters = {myKey: 5, myOtherKey: 7}
let component = <MyComponent {...myParameters}/>
// this is equal to <MyComponent myKey=5 myOtherKey=7 />

What's really cool is you can use it to mean "the rest of the values".

const myFunc = (value1, value2, ...values) {
    // Some code
}

myFunc(1, 2, 3, 4, 5)
// when myFunc is called, the rest of the variables are placed into the "values" array

Answer 5

Its called spread operator. For eg let hello={name: '',msg:''} let hello1={...hello} Now hello object properties is copied to hello1.

Answer 6

... this syntax is part of ES6 and not something which you can use only in React.It can be used in two different ways; as a spread operator OR as a rest parameter.You can find more from this article: https://www.techiediaries.com/react-spread-operator-props-setstate/

what you have mentioned in the question is something like this, let's assume like this,

    function HelloUser() {
      return <Hello Name="ABC" City="XYZ" />;
    }

with the use of spread operator you can pass props to the component like this.

     function HelloUser() {
       const props = {Name: 'ABC', City: 'XYZ'};
       return <Hello {...props} />;
     }