this.setState()とuseState()で連想配列の一部だけ変更したい

したいこと

Reactで連想配列のstate内にある項目を一部分だけ変更したい。
state = { a: array.a, b: array.b }のようにしてもいいが、配列の中身が多すぎるとすっきりしたコードにならない。

試したけどうまくいかなかった方法

this.setState({ array.a: newA });

→　ナメすぎました。笑

解決策

うまくいった方法

this.setState({ array: { a: newA } });

これだけでできました。

多次元配列の場合はシンプルに

this.setState({ array1: { array2: { a: newA } } });

でいけます。

Hooksを使う場合

ついでにHooksのuseStateを使う場合も試しました

const [stateOfArray, setStateOfArray] = useState({});

setStateOfArray(state => ({ ...state, a: newA }));

これでstateOfArray配列にあるa要素が変更されました。

参考

• this.setState()を用いる： https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react
• useState()を用いる： https://upmostly.com/tutorials/how-to-use-the-usecontext-hook-in-react