React 15.3.0以降で発生する「React - 'value' prop on 'input' should not be null」エラーの原因と解決方法を徹底解説！

2024-07-01

React で発生する "React - 'value' prop on 'input' should not be null" エラーと解決方法

制御された入力コンポーネントで value プロップが null に設定されている

制御された入力コンポーネントは、React の状態管理によって値を管理します。
value プロップは、入力コンポーネントに表示される初期値を設定するために使用されます。
しかし、value プロップに null 値を設定すると、React が警告メッセージを表示します。

解決策:

value プロップに空文字 ("") を設定します。
入力コンポーネントがまだ初期化されていない場合は、value プロップを undefined に設定します。

非制御入力コンポーネントは、DOM の value 属性によって値を管理します。

value プロップを削除します。
DOM の value 属性を設定します。

入力コンポーネントの値が null に変更される

制御された入力コンポーネントで、onChange イベントハンドラーを使用して値を変更する場合、値を null に変更すると、React が警告メッセージを表示します。

値を null に変更する代わりに、空文字 ("") に変更します。

第三者ライブラリが null 値を value プロップに設定している

一部の第三者ライブラリは、input コンポーネントの value プロップに null 値を設定することがあります。
これらのライブラリを更新するか、ライブラリが value プロップに null 値を設定しないようにする必要があります。

エラーの確認方法

このエラーは、ブラウザの開発者ツールのコンソールに表示されます。以下のメッセージが表示されます。

Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.

補足

このエラーは、React 15.3.0 以降でのみ発生します。
このエラーは警告メッセージであり、アプリケーションの動作には影響しません。
しかし、エラーメッセージを修正することで、コードの可読性と保守性を向上させることができます。

// 制御された入力コンポーネントで `value` プロップが `null` に設定されている場合

const ControlledInput = () => {
  const [value, setValue] = useState("");

  return (
    <div>
      <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
      <button onClick={() => setValue(null)}>値を `null` に設定</button>
    </div>
  );
};

// 非制御入力コンポーネントで `value` プロップが `null` に設定されている場合

const UncontrolledInput = () => {
  return (
    <div>
      <input type="text" value={null} />
    </div>
  );
};

// 入力コンポーネントの値が `null` に変更される場合

const ChangingValueInput = () => {
  const [value, setValue] = useState("");

  return (
    <div>
      <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
      <button onClick={() => setValue(null)}>値を `null` に変更</button>
    </div>
  );
};

上記のコードスニペットのエラーを解決するには、以下のいずれかの方法を実行します。

// 解決策

const ControlledInput = () => {
  const [value, setValue] = useState("");

  return (
    <div>
      <input type="text" value={value || ""} onChange={(e) => setValue(e.target.value)} />
      <button onClick={() => setValue(null)}>値を `null` に設定</button>
    </div>
  );
};

// 解決策

const UncontrolledInput = () => {
  return (
    <div>
      <input type="text" />
    </div>
  );
};

// 解決策

const ChangingValueInput = () => {
  const [value, setValue] = useState("");

  return (
    <div>
      <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
      <button onClick={() => setValue("")}>値を空文字に設定</button>
    </div>
  );
};

これらの変更により、React - 'value' prop on 'input' should not be null エラーを解決し、コードをよりクリーンで保守しやすくなります。

React で React - 'value' prop on 'input' should not be null エラーを解決するその他の方法

TypeScript を使用すると、value プロップの型を指定できます。これにより、コンパイラが null 値が渡されないようにチェックし、エラーを早期に検出することができます。

interface InputProps {
  value: string | undefined;
}

const MyInput: React.FC<InputProps> = ({ value, ...props }) => {
  return <input type="text" value={value} {...props} />;
};

null チェックを行う

value プロップにアクセスする前に、それが null でないことを確認できます。

const MyInput = ({ value, ...props }) => {
  if (value === null) {
    value = "";
  }

  return <input type="text" value={value} {...props} />;
};

デフォルト値を設定する

value プロップにデフォルト値を設定できます。

const MyInput = ({ value = "", ...props }) => {
  return <input type="text" value={value} {...props} />;
};

カスタムフックを使用する

useState フックを使用して、value プロップを管理するカスタムフックを作成できます。

const useInput = (initialValue = "") => {
  const [value, setValue] = useState(initialValue);

  return {
    value,
    onChange: (event) => setValue(event.target.value),
  };
};

const MyInput = () => {
  const { value, onChange } = useInput();

  return <input type="text" value={value} onChange={onChange} />;
};