[react]任意個数のサブコンポーネントの値をuseStateで管理する方法

「データベースから取得したレコードをもとにinputを複数配置する」など
あらかじめ数が決められない可変個数のinputを配置した際に、
それぞれのinputの入力値の処理がなかなか難しかったので、備忘録を兼ねて記事を書きました。

結論から書くと
コンポーネントの入力値をまとめてJSONオブジェクトで管理するとよいです。

ポイントはsetXxxにて
let newdata = Object.assign({}, datas)
として常に新しいオブジェクトを生成すること。

まるっとコードを置いておきます。

import React, { useState } from 'react'

const ArrayInput = () => {
  const [datas, setDatas] = useState({});

  const change = (e) => {
    const key   = e.target.name;
    const value = e.target.value;
    console.log(key + "/" + value);
    datas[key] = value;
    let newdata = Object.assign({}, datas); // important point!
    console.log(newdata);
    setDatas(newdata);
  }

  const inputs = ["a", "b", "c"].map((n, i) => {
    return <input key={i} name={n} value={datas[n]} onChange={change} />;
  });

  return (
    <div>
      {inputs}
    </div>
  );
}

export default ArrayInput;

参考資料(Qiita記事)

[react]子要素に複数配置したinputのvalueを取得する)

[React]useStateで定義したstateを更新したのに再レンダーされない件(object / 配列)