Using state instead of props

It's finally time to introduce some state into our component. Add the following test, which what should happen when the text field value changes:

it('saves new first name when submitted', async () => {
  expect.hasAssertions();
  render(
    <CustomerForm
      firstName="Ashley"
      onSubmit={({ firstName }) =>
        expect(firstName).toEqual('Jamie')
      }
    />
  );
  await ReactTestUtils.Simulate.change( firstNameField(), {
    target: { value: 'Jamie' }
  });
  await ReactTestUtils.Simulate.submit(form('customer'));
});

The call to Simulate.change dispatches a React onChange event to the field. The event object sends the value of the text field to the event handler, which we'll use to set state.

Follow these steps to make this pass:

1. Import useState into the module by modifying the existing React import:

import React, { useState } from 'react';

1. Change the customer constant definition to be assigned via a call to useState. The default state is the original value of customer. Note the relationship between the two pieces of code. This is an example of how we can "upgrade" existing code from one level of complexity to another—in this case, from a constant definition to a state variable:

const [ customer, setCustomer ] = useState({ firstName });

1. Create a new arrow function that will act as our event handler. This uses the form of setCustomer that takes a function. Using this form ensures that we correctly apply updates in the right order:

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

1. In the returned JSX, modify the input element as shown. We replace the readOnly property with an onChange property, hooking it up to the handler we just created:

<input
  type="text"
  name="firstName"
  id="firstName"
  value={firstName}
 onChange={handleChangeFirstName}
/>