React オブジェクトのstateを変更

Question

前提・実現したいこと

Reactのオブジェクトのstateを変更したいです。
tokyoの値をonClickした時に変更させるには、どのようにすれば良いのでしょうか。
ご教示いただけると助かります。

該当のソースコード

constructor(props) {
    super(props);
    this.state = {
     position: [
       {tokyo: 1960},
       {beijing: 2002}
     ]
    } 
  }

Answer 1

こんにちは

this.state.position を変更するトリガーとなるボタンやリンクなど、何らかのUIがクリック（あるいはReact Native であればタップ）されたとき、

• 変数name に、 "tokyo" や "beijing" などの地名が入り、
• 変数value に、変更後の値が入っている

ものとします。この場合、以下のように setState することで、該当要素のみを新しいオブジェクトに変更することができます。

this.setState({
    position: this.state.position.map(obj => name in obj ? { [name]: value } : obj)
});

以下は、上記を動作確認するサンプルです。

• **動作確認用 CodePen: **https://codepen.io/jun68ykt/pen/KKKqyzq

上記のサンプルでは、動作確認のため、

• this.state.position に要素を追加しました。
  
• this.state.positionの内容をJSONにして表示します。
  
• ボタンをクリックすると、 this.state.position に含まれる該当のオブジェクトが、乱数を元に作成された値を持つ新たなオブジェクトに変更されます。

以上、参考になれば幸いです。