[React/state更新]inputタグなどの入力フォームにおけるvalue値を更新

inputタグなど、入力値を変える場合はonChangeイベントでstateを更新する必要がある

空で設定した初期値を更新し、下記のように
name:タスク名,
content:炊事
というようにvalue値を更新できるようにする方法を備忘録として残しておく。

コンポーネント内でStateを定義する

初期値は空文字のため、{name:'', content:''}で設定

    const [newData, setNewData] = useState({name:'', content:''});

先程のnewDataを使用し、value値に使用する
そして後ほど定義するinputChangeをonChangeイベントに設定

        <form>
            <TextField  label="タスク名" name="name" value={newData.name} onChange={inputChange} />
            <TextField label="内容" name="content" value={newData.content} onChange={inputChange} />
            <Button color="primary" variant="contained">登録</Button>
        </form>

コンポーネント内にonChangeイベントのfunctionを定義

keyとvalueを設定し、newDataのkeyと入力フォームのname値が一致している場合にvalueに更新し、新しく作り直したオブジェクトに代入して、setNewDataで、stateの更新を行う。

    function inputChange(e){
        const key = e.target.name;
        const value = e.target.value;
        newData[key] = value;
        let data = Object.assign({}, newData);
        setNewData(data);
     }

以上、let data = Object.assign({}, newData);でオブジェクトを作り直さないとstateが更新されず、再レンダーもされません。
少し詰まりました。

他にもっといいやり方があるかも。。