Updating a form object with React useReducer

Question

I have a controlled form containing an address object.

  const [formData, setFormData] = useReducer(formReducer, {
    name: "",
    address: { addressLine1: "", city: "", state: "", zip: "" },
    phone: "",
    contact: "",
  });

const formReducer = (state, event) => {
  return {
    ...state,
    [event.name]: event.value,
  };
};

Updating a form input triggers a handler function.

<input
  className={style.bodylessInput}
  placeholder=" "
  type="text"
  maxLength={30}
  name="name"
  value={formData.name}
  onChange={handleChange}
/>

function handleChange(event) {
  setFormData({
    name: event.target.name,
    value: event.target.value,
  });
}

I am struggling to update the address fields. Using an input with name="addressLine1" will add a property to the form object rather than update the address.

Any advice on how I can update the address object inside my form object would be appreciated.

Okan Karadag · Answer 1 · 2022-08-21T21:58:56.857

You can do as below. input name be like address.addressLine1

function formReducer(state, event) {
  if(event.name.startsWith("address") && event.name.split(".").length > 1){
    var updateField = event.name.split(".")[1];
     return{
       ...state,
       address:  
       {...state.address, [updateField] : event.value}
     }
  }
  return {
    ...state,
    [event.name]: event.value,
  };
}

input:

 <input
        type="text"
        maxLength={30}
        name="address.addressLine1"
        value={formData.address.addressLine1}
        onChange={handleChange}
      />

Updating a form object with React useReducer

1 Answers1