【React】input要素のvalueにpropsを設定すると編集できなくなる問題の解決法

Reactコンポーネントで、初期値にpropsの値を設定したinput要素を描画したのだが、ブラウザからinput要素の値を変更しようとしたところ編集できなくなってしまった。

どうやらReactのpropsを初期値として設定する場合は、以下のようにdefaultValueを使用しなければならないようだ。

<input className="input" type="text" name="taskName" defaultValue={task.name} />

これで無事編集できるようになった。