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

The meaning of ... depends on where you use it in the code,

1. Used for spreading/copying the array/object - It helps to copy array/object and also add new array values/add new properties to object, which is optional.

const numbers = [1,2,3];
const newNumbers = [...numbers, 4];
console.log(newNumbers) //prints [1,2,3,4] 

const person = {
 name: 'Max'
};

const newPerson = {...person, age:28};
console.log(newPerson); //prints {name:'Max', age:28}

2. Used for merging the function arguments into a single array - You can then use array functions on it.

const filter = (...args) => {
   return args.filter(el => el ===1);
}

console.log(filter(1,2,3)); //prints [1]