【React Hooks】Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value が出たときの対策

適当にもほどがありますが、例えばReact Hooks使ってこんな感じでメールアドレスを入力するフォームを作ったとして。

import { useState } from "react";

function EmailForm() {
  const [email, setEmail] = useState();

  return(
    <form>
      <input type="text" name="email" value={email} onChange={(e) => setEmail(e.target.value)} />
    </form>
  )
}

export default EmailForm;

データ入力しようとするとコンソールにこんな感じのエラーが出てきます。

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

何がエラーの原因なのかというと「 This is likely caused by the value changing from undefined to a defined value」という一文に答えは書いてあって、useStateの初期値がundefinedになっているからです。

コードをよくよく見るとわかりますがuseState()になっちゃっているので、useState(“”)にすればエラーは解消されます。

React Hooksを使い始めたころによく出ていたエラーなので、ひょっとしたら同じエラーが出て首をひねっている方もいるかと思ったのでシェアします。