よく読めばわかるエラーでしたが、念のためにまとめます。
React の Material UI ライブラリを使用して開発している Web ページを開いた時に発生した警告です。
メッセージの全文はこちら。
`value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.
「`input`の`value`propはnullであってはなりません。 空の文字列を使用してコンポーネントをクリアするか、制御されていないコンポーネントの場合は「未定義」を使用することを検討してください。」とのことです。
参考にさせていただいた記事はこちら。
【React】 `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.の対処法 – Qiita
https://qiita.com/GalaxyNeko/items/b4dd4b519ee1d0ead969
上記の記事によると、ページにある input 要素の value に null が代入されている、または未定義だから、代わりに空文字を入れるようにしてください、とのことです。
実際、私のコードにそのような状況になっている箇所があり、そちらを修正したら警告が表示されなくなりました。
サンプルコードは下記のとおりです。
なお、必要なところのみ抜粋しているので、他のオプションは適宜追加してください。
import TextField from '@mui/material/TextField';
<TextField
label="ラベル"
value={this.state.inputValue ?? ''}
onChange={e => this.setState({ inputValue: e.target.value })}
variant="outlined" />
ポイントは 5行目です。
value={this.state.inputValue ?? ''} と指定すると、this.state.inputValue の値が存在しなかった場合、代わりにから文字列が代入されます。
どちらかというと、発生理由を理解するよりもどこで発生しているのかを探す方が大変だった気がします。
以上、React プロジェクトで発生した「`value` prop on `input` should not be null」警告の対処方法についてでした。
ご参考になれば幸いです。
