本記事では、ReactでWarning: Use the `defaultValue` or `value` props on instead of setting `selected` on .のエラーが出力された時の原因と対処法について解説しています。
Reactの学習におすすめ参考書
モダンJavaScriptの基本から始める React実践の教科書
| 著者 | 岡田 拓巳 |
|---|---|
| 発売日 | 2021/9/17 |
| ページ数 | 272ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (152件) |
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
原因
HTMLでは<option>タグで選択状態のプルダウンを設定したい時に、selected属性をセットしていましたがReactではselected属性は非推奨の書き方になるためコンソールログにエラーが出力されます。
下記のサンプルコードは、同様のエラーが出力されます。
function App() {
const OPTION_VALUES = ["プルダウンA", "プルダウンB", "プルダウンC"];
return (
<select>
{OPTION_VALUES.map((optionvalue) => (
<option
key={optionvalue}
value={optionvalue}
selected={optionvalue === "プルダウンB"}
>
{optionvalue}
</option>
))}
</select>
);
}
export default App;では、特定のプルダウンを選択された状態にしたい場合はどのように設定すれば良いのでしょうか？詳しく見ていきましょう。
対処法
対処法は<select>タグに対してdefaultValue属性またはvalue属性を設定し、その値に選択された状態にしたい<option>タグのvalue属性の値を指定します。
まずはdefaultValue属性を設定する方法から見ていきましょう。先ほどのサンプルコードをdefaultValueに置き換えます。
function App() {
const OPTION_VALUES = ["プルダウンA", "プルダウンB", "プルダウンC"];
return (
<select defaultValue="プルダウンB">
{OPTION_VALUES.map((optionvalue) => (
<option key={optionvalue} value={optionvalue}>
{optionvalue}
</option>
))}
</select>
);
}
export default App;これでプルダウンBが選択された状態でブラウザに表示されます。コンソールログのエラーも消えます。
次にvalue属性を設定する方法を見ていきましょう。先ほどのサンプルコードをvalue属性に置き換えます。
import { useState } from "react";
function App() {
const OPTION_VALUES = ["プルダウンA", "プルダウンB", "プルダウンC"];
const [value, setValue] = useState("プルダウンB");
return (
<select value={value} onChange={(e) => setValue(e.target.value)}>
{OPTION_VALUES.map((optionvalue) => (
<option key={optionvalue} value={optionvalue}>
{optionvalue}
</option>
))}
</select>
);
}
export default App;defaultValue属性と見比べると、コードの記述量が少し増えたのが分かります。value属性は、ユーザーがプルダウンを変更した時どれに変更したかを取得し更新させる必要があります。
もし、value属性に初期値をセットするだけで変更を更新しないとユーザーがプルダウンを変更しても反映がされないのに加え、コンソールログに「Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.」のエラーが出力されます。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 
