Setting Values for State in React - reactjs

Question

Good Afternoon,
I am having an issue setting an object via useState and I really do not understand why. Below is the input that I am using to display the information from the database based on the ?: statement. I am unsure why the state will not update, and it is possible that I am not handling the state properly. Can someone help me understand what I am doing wrong?
const [userUpdate, setUserUpdate] = useState({
firstName: "",
lastName: "",
email: "",
dob: "",
gender: "",
address: {
billing: {
address1: "",
address2: "",
city: "",
state: "",
postalCode: "",
},
shipping: {
address1: "",
address2: "",
city: "",
state: "",
postalCode: "",
},
},
});
<FormGroup widths="equal" id="billing">
<FormField
id="address1"
control={Input}
label="Address Line 1"
placeholder="123 Main Street"
defaultValue={
userUpdate.address.billing.address1
? userUpdate.address.billing.address1
: user.address.billing.address1
}
onBlur={(e) => {
handleChange("b", e);
}}
/>
</FormGroup>
The handleChange -> b is the section of the address that I need to update.. Billing or Shipping etc.
const handleChange = (section, e) => {
const form = e.target.form.id;
if (form === "user") {
console.log(section);
if (section === "b") {
setUserUpdate({
...userUpdate,
address: {
billing: {
[e.target.id]: e.target.value.trim(),
},
},
});
} else if (section === "s") {
setUserUpdate({
...userUpdate,
address: {
shipping: {
[e.target.id]: e.target.value.trim(),
},
},
});
} else {
setUserUpdate({
...userUpdate,
[e.target.id]: e.target.value.trim(),
});
}
}
if (form === "category") {
setCategoryUpdate({
...categoryUpdate,
[e.target.id]: e.target.value.trim(),
});
}
};
console log is showing the correct e.target.id => address1 and e.target.value.trim() => address, but its not updating the state..
now my code is throwing an error on the form default value
×
TypeError: Cannot read properties of undefined (reading 'address1')
GenerateActiveScreen
C:/Development/Picwrist Web Application/client/src/components/screens/user/Dashboard.js:397
394 | control={Input}
395 | label="Address Line 1"
396 | placeholder="123 Main Street"
> 397 | defaultValue={
| ^ 398 | userUpdate.address.shipping.address1
399 | ? userUpdate.address.shipping.address1
400 | : user.address.shipping.address1

Answer 1

Changed ID's for the fields and updated the handleChange state to pass the existing values from the previous state.
const handleChange = (section, e) => {
const form = e.target.form.id;
if (form === "user") {
const id = e.target.id;
const value = e.target.value.trim();
if (section === "b") {
setUserUpdate((userUpdate) => ({
...userUpdate,
address: {
...userUpdate.address,
billing: {
...userUpdate.address.billing,
[id.slice(1)]: value,
},
},
}));
} else if (section === "s") {
setUserUpdate((userUpdate) => ({
...userUpdate,
address: {
...userUpdate.address,
shipping: {
...userUpdate.address.shipping,
[id.slice(1)]: value,
},
},
}));
} else {
setUserUpdate({
...userUpdate,
[e.target.id]: e.target.value.trim(),
});
}
}
if (form === "category") {
setCategoryUpdate({
...categoryUpdate,
[e.target.id]: e.target.value.trim(),
});
}
};