Setting Values for State in React

user_9242697 0
Viewed 51

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);
                }}
              />

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
semantic-ui react-native reactjs
1 Answers

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