I have a form with 100 fields for example. I have two ways to deal with it:
const [field, setField] = React.useState({
a:"",
b:"",
c:"",
...
...
})
and deal with it like so:
setField(prev => ({
...prev, ...{b: 'Earth Worm Jim'}
}))
What is the best/right solution?
You could create a handleChangeInput func like this:
const handleChangeInput = (e) => {
const { name, value } = e.target;
setState((prevState) => ({ ...prevStatestate, [name]: value }));
};
Here it is important that the name attribute of your jsx, is the same as the state, so a, b or c...
You can mimic setState with useReducer hook like belows
const [state, setState] = useReducer((oldState, newState) => ({
...oldState, ...newState
}, {
image: '',
file: null,
username: '',
email: '',
});
I think there isn't problem when use useState() but if you want you can use useReduer() https://www.youtube.com/watch?v=kK_Wqx3RnHk