How do I update 2 objects with React Hook useState - reactjs

Question

My first Object
const [message, setMessage] = useState({
Features: {Active:false},
General: {FileTimeout:0,ZipDepth:0}
});
How do I update this object?
const handleInput=e=>{
const name=e.currentTarget.name;
const value=e.currentTarget.value;
var temp = {...message}
if(name == 'active'){
if(value==='on'){
temp.Features.Active=true;
}
else{}
}
else if(name == 'timeout'){
temp.General.ZipDepth= 5;
}
else if(name == 'zipdepth'){
temp.General.FileTimeout= 7;
}
}
New Values= { Features :{Active:true}, General: {FileTimeout:7,ZipDepth:5}});
How can I update the values like this? If there is a library or something for this, I can also use it.

Answer 1

You are mutating your state object. Even though you create a copy temp of the message state, you are mutating the nested properties. You necessarily need to also shallow copy all nested state you are updating.
I would suggest using a functional state update to access the previous messagestate, and use aswitchstatement to cover the different cases on thename` value, returning the next state value for each one. Notice that each level of nested state is shallow copied before it's updated.
const [message, setMessage] = useState({
Features: { Active: false },
General: { FileTimeout: 0, ZipDepth: 0 }
});
const handleInput=e=>{
const { name, value } = e.currentTarget;
setMessage(message => {
switch(name) {
case 'active':
if (value === 'on') {
return {
...message, // shallow copy of state
Features: {
...message.Features, // shallow copy nested state
Active: true,
},
};
} else {
// ? return some new state
}
case 'timeout':
return {
...message, // shallow copy of state
General: {
...message.General, // shallow copy nested state
ZipDepth: 5,
},
};
case 'zipdepth':
return {
...message, // shallow copy of state
General: {
...message.General, // shallow copy nested state
FileTimeout: 7,
},
};
default:
return message; // no update, return current state
};
});
}

Answer 2

const [message, setMessage] = useState({
Features: {Active:false},
General: {FileTimeout:0,ZipDepth:0}
});
const handleInput=e=>{
const name=e.currentTarget.name;
const value=e.currentTarget.value;
var temp = {...message}
if(name == 'active'){
if(value==='on'){
temp.Features.Active=true;
}
else{}
}
else if(name == 'timeout'){
temp.General.ZipDepth= 5;
}
else if(name == 'zipdepth'){
temp.General.FileTimeout= 7;
}
setMessage({...temp}) // You need to call setMessage function in order to update the state.
}