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 someone who wants to understand this simple and fast:

First of all, this is not a syntax only to react. this is a syntax from ES6 called Spread syntax which iterate(merge, add..etc) array and object. read more about here

So answer to the question: let's imagine you have this tag:

and You do this:

const user = {
  "name"=>"Joe",
  "age"=>"50"      
  "test"=>"test-val"
};

then the tag will equal this:

So what happened was when you use Spread syntax in a react tag it takes tag's attribute as object attributes which merge(replace if it exists) with the given object user. also, you might have noticed one thing that it only replaces before attribute, not after attributes. so in this example age remains as it is.

Hopes this helps :)