Adding brackets [] to the attribute in setState

Question

I'm trying to set a state that I'm getting from an input target:

Below is the code for my constructor and the method which updates the target's state

constructor(props) {
    super(props);

    this.state = {
        title: ''
    };
    this.onChange = this.onChange.bind(this);
}

    onChange(e) {
    this.setState({
        [e.target.name] :  e.target.value
    });
}

Where the input is given by this code:

<input type={"text"} name={"title"} value={this.state.title} onChange={this.onChange}/>

When I debug my code I found that e.target.name contains "title" and I do not understanding why I need the squared brackets [] in [e.target.name] ... I found some explanation on the web but I have not understood what it means:

We use attr in this.setState with square brackets [ ] because [ ] lets us query object key names programmatically (similar to how array[2] or object[keyA] works)

Can you help me to understand why we need these brackets ?

FYI : If I remove the brackets as this :

onChange(e) {
        this.setState({
            e.target.name : e.target.value
        });
    }

this give me this error : "Unexpected token, expected" at e.target.name

Answer 1

This syntax is just another way to set a key of an object without knowing ahead of time what you want it to be called -- a computed property name.

For instance, these two examples accomplish the same thing:

const myNewObject = {
  name: 'Joe',
  age: 30
}

…

const propName = 'age'

const myNewObject = {
  name: 'Joe',
  [propName]: 30
}

So in your example– e.target.name comes from the name attribute of the input element ("title", in this case). By setting the state's key with [e.target.name] you're really just setting the title property of the state.

Answer 2

  { sth: else }

is equal to

  { ["sth"]: else }

or

  var id = "sth";

 { [id]: else }

So you basically need it when you want to evaluate the identifier instead of taking it.