本記事では、ReactでWarning: Use the `defaultValue` or `value` props on instead of setting `selected` on .のエラーが出力された時の原因と対処法について解説しています。
- JavaScriptの基礎から始めてReactの機能を一通り学べる
- 実務で必要となる知識を意識しながら学習を進められる
- 現場のシチュエーションベースのストーリーで技術解説
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
原因
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.」のエラーが出力されます。
