Modifying handleChange to work with multiple fields

After adding all three fields, you will have ended up with three very similar onChange event handlers:

const handleChangeFirstName = ({ target }) =>
  setCustomer(customer => ({
    ...customer,
    firstName: target.value
  }));

const handleChangeLastName = ({ target }) =>
  setCustomer(customer => ({
    ...customer,
    lastName: target.value
  }));

const handleChangePhoneNumber = ({ target }) =>
  setCustomer(customer => ({
    ...customer,
    phoneNumber: target.value
  }));

You can simplify these down into one function, but you'll need to modify your tests first. The calls to ReactTestUtils.Simulate.change needs some extra data to be passed: the target's name. At runtime, this property is passed to all event handlers by React.

Add that in now, as shown:

const itSubmitsNewValue = (fieldName) =>
  it('saves new value when submitted', async () => {
    ...
    await ReactTestUtils.Simulate.change(field(fieldName), {
      target: { value: 'newValue', name: fieldName }
    });
    ...
  });

Since the name of our fields is the same as the name of our customer properties, we can now destructure the event to pull out the target name, merging our event handlers into one, as shown. This uses the computed property name feature of ES6:

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