Let's implement an answer form on the question page using the following steps:

1. Open QuestionPage.tsx and import our Form and Field components:

import { Form } from './Form';
import { Field } from './Field';

2. Let's create our form in the JSX just beneath the list of answers:

<Fragment>
  <p ... >
    {question.content}
  </p>
  <div ... >
    {`Asked by ${question.userName} on
${question.created.toLocaleDateString()} 
${question.created.toLocaleTimeString()}`}
  </div>
  <AnswerList data={question.answers} />
  <div
    css={css`
      margin-top: 20px;
    `}
  >
    <Form submitCaption="Submit Your Answer">
      <Field name="content" label="Your Answer" type="TextArea" />
    </Form>
  </div>
</Fragment>

So, the form will contain a single field for the answer content and the submit button will have the caption Submit Your Answer.

3. Let's give this a try in the running app by clicking a question on the home page:

Our form renders just as we expect.

Our forms are looking good but there is no validation yet. For example, we could submit a blank answer to a question. We will enhance our forms with validation in the next section.