How do I update a field of a field in my React component?

Question

I'm trying to write an event handler to update a field of a field in my component. My component has the following attributes...


    deliveryConfirmationImage: null
    
    deliveryLocation: {address: "639 N Westmoreland Ave, Los Angeles, CA 90004, 
    
    pickUpWindow: {startTime: "2020-05-17T18:58:28.829545", timeWindowType: "whenever possible"}
    

Notice that pickUpWindow is itself an object, with its own attributes. I have this in my componet...

  const { handleChange, values } = useForm(mission);
...
  function handleChangePickupWindow(data) {
    const { time } = data;
    const name = "pickUpWindow";
    const value = {startTime: time};
    handleChange({ target: { name, value } });
  }

...
                <DateTimeInput
                  dateInputProps={{
                  id: "date-pickup",
                  label: "Pickup Date",
                }}
                onChange={handleChangePickupWindow}
                required
                timeInputProps={{
                  id: "time-pickup",
                  label: "Pickup Time",
                }}
                value={values.pickUpWindow.startTime}
              />

in which I define the "handleChange" hook like so...

  const handleChange = ({ target }) => {
    setValues((values) => ({
      ...values,
      [target.name]: target.value,
    }));
  };

But sadly, although I see the correct value of the time passed to my handle change event handler, I don't know how to update the appropriate item in my "values" object to update my component correctly -- ie "values.pickUpWindow.startTime" always remains the same value, even after I try and change it. What else do I need to do to update my underlying field?

Answer 1

Looks like you are writing parenthesis out of context, and even if it was working you will have an extra (big) problem... While trying to update a value within an object with another object, you are overriding the entire object. Updating startTime will make you update the entire pickUpWindow nested object as far as you use useState:

Let me show you... Your object:

  const obj = {
    deliveryConfirmationImage: null,
    deliveryLocation: {
      address: "639 N Westmoreland Ave, Los Angeles, CA 900004",
      pickUpWindow: {
        startTime: "2020-05-17T18:58:28.829545",
        timeWindowType: "whenever possible"
      }
    }
  }

And if you try try this on a separate file:

  obj = { ...obj, pickUpWindow: {} };
  console.log(obj);

Oops, you have an extra pickUpWindow nested object but it didn't update the real pickUpWindow. I suggest you to simplify that structure and build later the object (like before onSubmit) because your code will not work as you expect.