Adding brackets [] to the attribute in setState

  { 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.


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.