Reputation: 201
I'm on the step of converting one of my Class components to a functional one, however, I'm thinking of better way of handling state from the functional version.
Currently, here is my Class component state:
this.state = {
email: "",
password: "",
errors: {},
};
On functional component version ,Currently I would have to break those states into three different states using UseState:
const [email, setEmail] = useState("");
const [password, setpassword] = useState("");
const [errors, setErrors] = useState({});
is there a way to combine these states in 1 state that is an object by default like this:
const [states,setStates] = useState({
email:"",
password:"",
errors:{}
});
Reason why is because I have this kind of code from my class components, and I dont think this will work if I opted for the first Functional comp. setup:
handleChange = (event) => {
this.setState({
[event.target.name]: event.target.value,
});
};
Upvotes: 1
Views: 62
Reputation: 51956
Yes you can achieve that using a custom hook:
const useLegacyState = initialState => {
return useReducer((prevState, newState) => {
return typeof newState === 'function'
? { ...prevState, ...newState(prevState) }
: { ...prevState, ...newState };
}, initialState);
};
And usage:
const [states, setStates] = useLegacyState({
email: '',
password: '',
errors: {}
});
const handleChange = event => {
setStates({
[event.target.name]: event.target.value
});
};
Upvotes: 1
Reputation: 2363
Yes you can do that. But you have to modify your setState Function like this
handleChange = (event) => {
setStates({ ...states , [event.target.name]: event.target.value})
};
you have to do this on every setState call wherever you do .
Upvotes: 1
Reputation: 7563
Yes, the structure of the state variable is totally up to you.
Note, however, that this means that every time you call setStates
you'll need to provide the entire structure.
You can use something like Object.assign
to "update" existing state like this:
setStates(Object.assign({}, states, {a: 'b'}));
This would add the a
key with a b
value to the state, without changing previous ones.
Upvotes: 0