Pelo que eu vi do seu código, seria para atualizar dinamicamente o state.
No caso do React, se eu tiver uma tela com 10 campos, e eu quiser persistir os dados de cada um, eu teria um state com 10 itens e 10 funções para atualizar o state de cada campo.
Fazendo desta forma:
this.state = {
firstName: '',
age: '',
}
}
handleChange = (event) => {
const { target: { name, value } } = event
this.setState({ [name]: value })
}
render() {
return (
<form >
<label>
First Name:
<input
name="firstName"
type="text"
value={this.state.firstName}
onChange={this.handleChange} />
</label>
<label>
Age:
<input
name="age"
type="number"
value={this.state.age}
onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
Eu posso ter uma função de atualização única para qualquer campo que eu adicionar.
Perceba que no formulário o nome do input é o mesmo nome da propriedade do state. A função pega o campo e o valor do campo, faz a separação e atualiza o state.
Aqui tem um exemplo passo a passo:
https://medium.com/@bretdoucette/understanding-this-setstate-name-value-a5ef7b4ea2b4