Why is the property name wrapped in square brackets in setState?

Question

JavaScript

handleChange = type => ev =>{
        const {value} = ev.target
        if (value.length > limits.user.max) return
        this.setState({
            [type]: value
        })
    }

This method stands on the onChange event. Please explain so I can understand. Why is the type property wrapped in square brackets in setState?

Answer 1

Computed property names .

This method stands on the onChange event.

Doubtful statement. "Event" is "worth" not handleChange, but the function it returns. Apparently, it is necessary to handle events that occur in different places in a uniform way - the only differences are the names of the updated properties, for each of which a separate handler is created. Which, by the way, is not necessary at all - you can attach the type value to the element as a data attribute, and then you can use a common handler:

handleChange = ({ target: { value, dataset: { type } } }) => {
  if (value.length <= limits.user.max) {
    this.setState({
      [type]: value
    });
  }
}

<input onChange={this.handleChange} data-type="xxx">
<input onChange={this.handleChange} data-type="yyy">
<input onChange={this.handleChange} data-type="zzz">