【react】map関数で生成したn番目のチェックボックスの値を変更する方法

去年の12月ころにチェックボックスの値をprevStateを使って更新する方法を

書きましたが、今回はmap関数でラップされたn番目のチェックボックスの値を更新する

方法を書いていきます。

前回は、特にループなどで回していないチェックボックスが3つ並んだだけの状態で

prevStateを使って以下のように値を変えていました。

</pre>
addOption(checked_num){
this.setState(prevState => ({
other_options: prevState.other_options.map(
obj => (obj.id === checked_num ? Object.assign(obj, { value: !obj.value }) : obj)
)
}));
}

<label><Checkbox value={1} onChange={() => this.addOption(1)} />チラシを見た</label>
<label><Checkbox value={2} onChange={() => this.addOption(2)} />友人に勧められた</label>
<label><Checkbox value={3} onChange={() => this.addOption(3)} />ネットで見た</label>
<pre>

addOptionの引数とother_optionsの中のidが一致していれば値を変える(true/falseを切り替える)。

addOptionで番号を指定しているだけの単純なプログラムですが、これをmap関数などでラップして

動的に生成している時はどうすればいいか。

javasript上でmapで新たに配列を作り直しているので、見分けをつけるには識別のための何らかの値が必要になる。

その識別は、map関数内でindexを含めることでn番目のチェックボックスを更新することができます。

</pre>
checked(num){
this.setState(prevState => ({
itemList: prevState.itemList.map(
(obj,index) => (index === num ? Object.assign(obj, { countinue: !obj.countinue }) : obj)
)
}));
console.log(this.state.itemList);
}
<pre>

obj =>となっていたところを(obj,index) =>に変更。後はこのindexと引数numを照合して一致したn番目の

チェックボックスを確認してtrue/falseと正しく切り替わっていれば完了です。

map内のindexを意識して書き換えればチェックボックス以外の値も同じように変更できるようになります。