CODEWITHSUNDEEP
javascriptreactjs
Tun Huang
Tun Huang

Reputation: 141

React warning "You provided a `value` prop to a form field without an `onChange` handler..." when using event propagation

An example:

function App() {
  const [user, setUser] = React.useState({
    name: '',
    surname: ''
  });
  const handleChange = e => {
    setUser(prev => ({...prev, [e.target.name]: e.target.value}));
  };
  return (
    <div className="App">
      <form onChange={handleChange}>
        <input type="text" name="name" placeholder="name" value={user.name} />
        <input type="text" name="surname" placeholder="surname" value={user.surname} />
      </form>
    </div>
  );
}

ReactDOM.createRoot(document.querySelector('.react')).render(<App />);
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>

And I get these warnings:

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.

Should I just ignore them?

Upvotes: 2

Views: 6299

Answers (2)

Freez
Freez

Reputation: 7588

Technically, there's nothing wrong about your code. Then yes, you can safely ignore the logs.

However, event delegation is not the "React way" to deal with form states, so you won't be able to get rid of those warnings.

IMHO it's not a good development experience so you could just add a onChange={handleChange} to each field rather than setting the onChange on the form. I guess that the React event system is optimized enough to not have to do event delegation, even if in your use case it was pretty convenient and elegant.

Upvotes: 1

Lucas Emanuel
Lucas Emanuel

Reputation: 626

Your OnChange needs to be in the inputs and not in the form, here is an example:

<input type="text" name="name" placeholder="name" value={user.name} onChange={handleChangeName}/>
<input type="text" name="surname" placeholder="surname" value={user.surname} onChange={handleChangeSurName}/>

and this is the handle change of name

const handleChangeName = (e) => {
  setUser(userInfo => {...userInfo, ['name']: e.target.value})
}

Because you don't have onChange in your inputs, it generates this alert.

Upvotes: -1

Related Questions