What are the ellipses (...) for in managing an event in React?

Question

I'm a beginner in react, and I'm following a tutorial for display objects returned by a REST api. In handleChangeTitle method I get the value written in text box, and I update the state of component with new activeItem:

handleChangeTitle(e){
    //ogni volta che cambia qualcosa nella casella di testo, viene chiamata questa funzione
    var name = e.target.name
    var value = e.target.value 
    console.log('Name:', name)
    console.log('Value:', value)
    this.setState({
      activeItem:{
        ...this.state.activeItem,
        title:value
      }
    })
  }

What are the ellipsis for before referring to this.state.activeItem?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax — epascarello, Aug 29 '22 at 14:53
It is called the spread syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax, This is used to create a shallow copy of the object instead of modifying the reference of the current state. — Kilian, Aug 29 '22 at 14:54
This is JavaScript, not Python. This does not have anything to do with ellipsis in Numpy or Python. `...` means something entirely different in JavaScript than it does in Python. — Jesper, Aug 29 '22 at 14:57
@rv.kvetch It's Italian, I was explaining to myself what happens in the function. Casella di testo means text box. — Davide, Aug 29 '22 at 15:08
@Jesper I tagged python because I confused it with Ellipsis in Python, which is the first result I obtained searching it on web. I never seen it before. Thank you. — Davide, Aug 29 '22 at 15:14

score 1 · Accepted Answer · answered Aug 29 '22 at 15:02

It is called the spread syntax. It is a quick syntax to copy one object to another.

let obj1 = { a: 1 }
let obj2 = { ...obj1, b:2}
console.log(obj2)

Following code will print: {a:1,b:2}

Meaning content of obj1 was copied in obj2.

You can override values in new object as well, for eg:

let obj3 = {...obj2, b:3, c:2}
console.log(obj3)

This will print: {a:1,b:3,c:2}, the value of b was overridden.

You can follow this link for in-depth explanation.

What are the ellipses (...) for in managing an event in React?

1 Answers1