React

【React】You provided a `value` prop to…の対処法

本記事では、Reactで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.のエラーが出力された時の原因と対処法について解説しています。

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以上前の書籍ですが、内容は今でも役に立つものばかりです!

原因

まず始めにこのエラーが出力される原因は、フォームのvalue属性に対して固定の値を設定しているからです。

固定値を設定してしまうと、ユーザーが文字を入力したりプルダウンを変更したりとアクションを起こすことが出来なくなってしまうことをReactはエラーで教えてくれています。

例えば、下記のコードはテキストフォームに初期値として「サンプル」という文字列を設定しています。

function App() {
  return <input value="サンプル" />;
}

export default App;

これをブラウザで表示させると、テキストフォームに初期値のサンプルがセットされている状態になりますが、サンプルの後に文字を追加したり削除することは出来ません。

では、このエラーを修正するにはどのようにすれば良いか?詳しく見ていきましょう。

対処法

エラーを無くす方法は2つあります。

1つ目は初期値を設定したい場合はvalue属性ではなくdefaultValue属性に値を設定する方法です。先ほどのサンプルコードを書き換えてみましょう。

function App() {
  return <input defaultValue="サンプル" />;
}

export default App;

このようにコードを書き換えることで、初期値を設定しつつユーザーからのアクションも問題なく受け付けるように出来ます。

2つ目はonChangeイベントでユーザーからのアクションを検知し正しい値をvalue属性に設定する方法です。先ほどのサンプルコードを書き換えてみましょう。

import { useState } from "react";

function App() {
  const [val, setVal] = useState("サンプル");
  return <input value={val} onChange={(e) => setVal(e.target.value)} />;
}

export default App;

このようにコードを書き換えることで、value属性に初期値を設定しつつユーザーからのアクションがあった時はその変更を取得し更新(再レンダリング)することが出来ます。

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