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
valueprop to a form field without anonChangehandler. This will render a read-only field. If the field should be mutable usedefaultValue. Otherwise, set eitheronChangeorreadOnly.
Should I just ignore them?
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.
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.