react state名を変数で作成

Question

  this.state = {
    name:true,
    name1:true,
  }
/中略/
  Change = (n) => {
    this.setState({ name: !this.state.name });
  };

例えば上記のようなコードがあった場合、
Changeの部分のstate名をクリックした箇所の引数によって
変更することは可能でしょうか？

  Change = (n) => {//もしnに1が入ってきた場合
    this.setState({ "name"+n: !this.state."name"+n });
  };

のようなイメージです。

上記だとsyntaxerrorです・・・

Answer 1

ES6では、オブジェクトリテラルのプロパティ名としても角カッコが使えます。

Change = (n) => {//もしnに1が入ってきた場合
    this.setState({ ["name"+n]: !this.state["name"+n] });
  };

// もっとも、もとの値を使った変化を行うときは、このように関数で更新するほうがいい
Change = (n) => {//もしnに1が入ってきた場合
    const key = 'name' + n;
    this.setState((oldstate) => {
      const value = oldstate[key];
      return {[key]: !value};
    });
  };

Comments

[cheche0830]

ありがとうございます！！！！