Learn React with TypeScript 3

Implementing our new ContactUs component

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