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

Question

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?

It's exactly as the error says - what is unclear about the message? — CertainPerformance, Jul 30 '22 at 02:25
@CertainPerformance Because I'm quite sure that my code works? There is an onChange handler in form element. — Tun Huang, Jul 30 '22 at 02:31
Why the ... is the question already closed. I know what controlled and uncontrolled components are, that was not my question and that doesn't answer my question. My question is about the warning and if I can safely ignore it. — Tun Huang, Jul 30 '22 at 02:39
Does this answer your question? [What are React controlled components and uncontrolled components?](https://stackoverflow.com/questions/42522515/what-are-react-controlled-components-and-uncontrolled-components) — Medet Tleukabiluly, Jul 30 '22 at 02:42
@MedetTleukabiluly Thanks for researching, but that's not my question. I know what a controlled component is. I have both the onChange handler and value, I just don't put the handler in each input because that's not necessary. I know it works in vanilla javascript, and so far it also works in my react project. I just want to be sure that I haven't overlooked something regarding the warning. — Tun Huang, Jul 30 '22 at 02:51

score 1 · Accepted Answer · answered Jul 30 '22 at 03:54

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.

score -1 · Answer 2 · answered Jul 30 '22 at 03:11

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.

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

2 Answers2