Setting Values for State in React

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(),
      });
    }
  };