js react []の意味

Question

handleChange(event) {
    const { name, value } = event.target;
    this.setState({
      [name]: value
    });
  }

上記コードを解釈しています。
nameとvalueにオブジェクトを分割代入しsetStateしている

と解釈しています。
ただ、[name]の[]がどういう意味かわかっていないので教えていただきたいです。

Answer 1

動的にオブジェクトのkeyを変えたい場合、keyに変数を使いたいところですが、

const name = 'name';
const obj = {name: 'abc'};

としてしまうと、普通のkeyとして通常通り認識されるので、

const name = 'name';
const obj = {[name]: 'abc'};

上記のように、[]でkeyの部分を囲ってあげて、
それが変数であるように解釈されるようにしてあげる必要があります。

Comments

[miyabi_pudding]

うお、今こんな書き方できるんですか！
便利すぎです。
横槍失礼しました。

[HayatoKamono]

YES!!

Answer 2

これはComputed Property（訳語はまだ一定せず）という、ES2015での新機能です。name変数に入った値をキーとします（MDN）。