Multiple state changes - reactjs

Question

I am following a lesson. I have a controlled form and a handleInput method to reflect any changes in input. However, I didn't understand why he writes [name] instead of name inside of the handleInput method. A detailed explanation will be appreciated.
handleInput(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
})
}
Form Structure:
<Form>
<FormGroup>
<Label htmlFor="firstname" md={2}>First Name</Label>
<Input type="text" id="firstname" name="firstname"
value={this.state.firstname}
onChange={this.handleInput} />
</FormGroup>
<FormGroup>
<Label htmlFor="lastname" md={2}>Last Name</Label>
<Input type="text" id="lastname" name="lastname"
value={this.state.lastname}
onChange={this.handleInput} />
</FormGroup>
</Form>

Answer 1

This syntax is for computed property name
Its a new ES6 feature which computed the property name of the object.
Before this you had to specify the property directly on the object.
var data = {};
data[name] = value;
this.setState(data);
With the new syntax you can do it inline with the object definition.
this.setState({
[name]: value
})

Answer 2

In the form, the input elements has names. In handleInput function, when you do
const name = target.name;
This name gets assigned to name
Now, on doing
this.setState({
[name]: value
})
name gets evaluated to firstname or lastname.
You can read more about this feature here

Answer 3

It's an ES6 feature, the square brackets allows you to programmatically reference the property of the object.

Answer 4

Declaring the key in state as just name: value would reference an object key in state actually named name. Instead using [name] references the value of name attained from the input (const name = target.name;) which will in turn reference the corresponding key in the state.

Answer 5

handleInput(event) {
const target = event.target;
const value = target.value;
const name = target.name;
// let name now = "blocker" and value = "something"
this.setState({
[name]: value
})
}
on console.log(this.state)
output will be
{blocker:something}
Now if you remove [] from name
this.setState({
name: value
})
then on console.log(this.state)
output will be
{name:something}