React.jsを使用してWeb開発を行っている際、セレクトボックスの実装時に以下のようなワーニングメッセージに遭遇することがあります。

Warning: Use the defaultValue or value props on <select> instead of setting selected on <option>

このエラーは、Reactの推奨する制御されたコンポーネントの概念に反する実装をしている場合に表示されます。本記事では、このエラーの原因と適切な解決方法について詳しく解説します。

エラーの原因

このワーニングは、``要素に直接`selected`属性を設定しているときに発生します。Reactでは、フォーム要素の値をコンポーネントの状態（state）で管理することが推奨されており、``要素全体の値をコントロールすることが期待されています。

解決方法

1. valueプロパティを使用する

``要素に`value`プロパティを設定し、その値を状態（state）で管理することで、このエラーを解決できます。

import React, { useState } from 'react';

function SelectComponent() {
  const [selectedValue, setSelectedValue] = useState('option1');

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };

  return (
    <select value={selectedValue} onChange={handleChange}>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
}

2. defaultValueプロパティを使用する

初期値のみを設定し、その後のユーザーの選択を制御しない場合は、`defaultValue`プロパティを使用できます。

function SelectComponent() {
  return (
    <select defaultValue="option2">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
}

まとめ

React.jsでセレクトボックスを実装する際は、``要素に直接`selected`属性を設定するのではなく、``要素に`value`または`defaultValue`プロパティを使用することが重要です。これにより、Reactの制御されたコンポーネントの概念に沿った実装が可能となり、警告メッセージを回避できます。

適切な実装方法を選択することで、よりメンテナンス性の高い、Reactの best practices に沿ったコードを書くことができます。セレクトボックスの実装時は、常にこの点に注意しましょう。