What do these three dots in React do?

Question

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

<Modal {...this.props} title='Modal heading' animation={false}>

Answer 1

In a short, the three dots ... is a spread operator in ES6(ES2015). spread operator will fetch all the data.

let a = [1, 2, 3, 4];
let b = [...a, 4, 5, 6];
let c = [7,8,...a];

console.log(b); give the result [1,2,3,4,5,6]

console.log(c); give the result [7,8,1,2,3,4]

Answer 2

The ...(spread operator) is used in react to:

provide a neat way to pass props from parent to child components. e.g given these props in a parent component,

this.props = {
  username: "danM",
  email: "[e-mail]"
}

they could be passed in the following manner to the child,

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

which is similar to this

<ChildComponent username={this.props.username} email={this.props.email} />

but way cleaner.

Answer 3

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 4

It is called spreads syntax in javascript.

It use for destructuring an array or object in javascript.

example:

const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)

const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)

You can do it same result with Object.assign() function in javascript.

Reference:

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

Answer 5

It is common practice to pass props around in a React application. In doing this we able to apply state changes to the child component regardless of whether it is Pure or Impure (stateless or stateful). There are times when the best approach, when passing in props, is to pass in singular properties or an entire object of properties. With the support for arrays in ES6 we were given the "..." notation and with this we are now able to achieve passing an entire object to a child.

The typical process of passing props to a child is noted with this syntax:

var component = <Component foo={x} bar={y} />;

This is fine to use when the number of props is minimal but becomes unmanageable when the prop numbers get too much higher. A problem with this method occurs when you do not know the properties needed within a child component and the typical JavaScript method is to simple set those properties and bind to the object later. This causes issues with propType checking and cryptic stack trace errors that are not helpful and cause delays in debugging. The following is an example of this practice, and what not to do:

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y;

This same result can be achieved but with more appropriate success by doing this:

var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?

But does not use JSX spread or JSX so to loop this back into the equation we can now do something like this:

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

The properties included in "...props" are foo: x, bar: y. This can be combined with other attributes to override the properties of "...props" using this syntax:

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

In addition we can copy other property objects onto each other or combine them in this manner:

var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';

Or merge two different objects like this (this is not yet available in all react versions):

var ab = { ...a, ...b }; // merge(a, b)

Another way of explaining this, according to Facebook's react/docs site is:

If you already have "props" as an object, and you want to pass it in JSX, you can use "..." as a SPREAD operator to pass the whole props object. The following two examples are equivalent:

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}



function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

Spread attributes can be useful when you are building generic containers. However, they can also make your code messy by making it easy to pass a lot of irrelevant props to components that don't care about them. This syntax should be used sparingly.

Answer 6

The three dots in JavaScript are spread / rest operator.

Spread operator

The spread syntax allows an expression to be expanded in places where multiple arguments are expected.

myFunction(...iterableObj);

[...iterableObj, 4, 5, 6]

[...Array(10)]

Rest parameters

The rest parameter syntax is used for functions with variable number of arguments.

function(a, b, ...theArgs) {
  // ...
}

The spread / rest operator for arrays was introduced in ES6. There's a State 2 proposal for object spread / rest properties.

TypeScript also supports the spread syntax and can transpile that into older versions of ECMAScript with minor issues.