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

This is a feature of ES6, which is used in React as well. Look at the below example:

function Sum(x,y,z) {
   return x + y + z;
}
console.log(Sum(1,2,3)); //6

This way is fine if we have a maximum of 3 parameters. But, what if we need to add for example 110 parameters. Should we define them all and add them one by one?

Of course there is an easier way to do, which is called SPREAD. Instead of passing all those parameters you write :

function (...numbers){} 

We have no idea how many parameters we have, but we know there are heaps of those. Based on ES6, we can rewrite the above function as below and use the spread and mapping between them to make it as easy as a piece of cake:

let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current );
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9));//45