Mastering React Test-Driven Development

Modifying handleChange to work with multiple fields

The Git tag for this section is handle-change.

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, ...