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

These three dots are called spread operator. Spread operator helps us to create a copy state or props in react.

Using spread operator in react state

const [myState, setMyState] = useState({
    variable1: 'test',
    variable2: '',
    variable3: ''
});

setMyState({...myState, variable2: 'new value here'});

in the above code spread operator will maintain a copy of current state and we will also add new value at same time, if we don't do this then state will have only value of variable2 spread operator helps us to write optimize code