React

Warning: Use the `defaultValue` or `value` props on instead of setting `selected` on .の原因と対処法

本記事では、ReactでWarning: Use the `defaultValue` or `value` props on instead of setting `selected` on .のエラーが出力された時の原因と対処法について解説しています。

Reactの学習におすすめ参考書
モダンJavaScriptの基本から始める React実践の教科書

本書情報
著者岡田 拓巳
発売日2021/9/17
ページ数272ページ
Kindle版
レビュー
(Amazon)
(152件)
先輩くん
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

原因

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.」のエラーが出力されます。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村