"A component is changing an uncontrolled input to be controlled." this error showing in React JS

Question

When I write this code:

import React, { useState } from "react";

export default function App() {
  const [email, setEmail] = useState("[email protected]");

  return (
    <div>
      <input
        type="text"
        name="name"
        value={email}
      />
    </div>
  );
}

And run on the browser. This gives me this Warning:

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.

How can I solve this?

Answer 1

you can't change the input value because the email state doesn't change. if you want to change the input value you have to use the onChange event in the input tag and then onChange update the state.