In this section, we are going to implement a new ContactUs component using our Form and Field components:

1. Let's start by removing the props interface from ContactUs.tsx.
2. The content within the ContactUs SFC will be very different to the original version. Let's start by removing the content so that it looks as follows:

const ContactUs: React.SFC = () => {
  return ();
};

3. Let's import our Form component into ContactUs.tsx:

import { Form } from "./Form";

4. We can now reference the Form component, passing some default values:

return (
  <Form
    defaultValues={{ name: "", email: "", reason: "Support", notes: "" }}
  >
  </Form>
);

5. Let's add the name field:

<Form
  defaultValues={{ name: "", email: "", reason: "Support", notes: "" }}
>
  <Form.Field name="name" label="Your name" />
</Form>

Note we haven't passed the type prop because this will default to a text-based input, which is just what we require.

6. Let's add the email, reason, and notes fields now:

<Form
  defaultValues={{ name: "", email: "", reason: "Support", notes: "" }}
>
  <Form.Field name="name" label="Your name" />
  <Form.Field name="email" label="Your email address" type="Email" />
  <Form.Field
    name="reason"
    label="Reason you need to contact us"
    type="Select"
    options={["Marketing", "Support", "Feedback", "Jobs", "Other"]}
  />
  <Form.Field name="notes" label="Additional notes" type="TextArea" />
</Form>

7. The ContactUsPage is going to be much simpler now. It won't contain any state because that is managed within the Form component now. We also don't need to pass any props to the ContactUs component:

class ContactUsPage extends React.Component<{}, {}> {
  public render() {
    return (
      <div className="page-container">
        <h1>Contact Us</h1>
        <p>
          If you enter your details we'll get back to you as soon as we can.
        </p>
        <ContactUs />
      </div>
    );
  }
}

If we go to the running app and go to the Contact Us page, it renders as required and accepts the values we enter.

Our generic form component is progressing nicely, and we have consumed it to implement the ContactUs component as we had hoped. In the next section, we are going to improve our generic component even further by adding validation.