Follow these steps to create a component that will render a list of answers:

1. Create a new file called AnswerList.tsx with the following import statements:

import { FC } from 'react';
import { AnswerData } from './QuestionsData';
/** @jsx jsx */
import { css, jsx } from '@emotion/core';
import { Answer } from './Answer';
import { gray5 } from './Styles';

So, we are going to use an unordered list to render the answers without the bullet points. We have referenced a component, Answer, that we'll create later in these steps.

2. Let's define the interface so that it contains a data prop for the array of answers:

interface Props {
  data: AnswerData[];
}

3. Let's create the AnswerList component, which outputs the answers:

export const AnswerList: FC<Props> = ({ data }) => (
  <ul
    css={css`
      list-style: none;
      margin: 10px 0 0 0;
      padding: 0;
    `}
  >
    {data.map(answer => (
      <li
        css={css`
          border-top: 1px solid ${gray5};
        `}
        key={answer.answerId}
      >
        <Answer data={answer} />
      </li>
    ))}
  </ul>
);

Each answer is output in an unordered list in an Answer component, which we'll implement next.

4. Let's move on and implement the Answer component by creating a file called Answer.tsx with the following import statements:

import { FC } from 'react';
/** @jsx jsx */
import { css, jsx } from '@emotion/core';
import { AnswerData } from './QuestionsData';
import { gray3 } from './Styles';

5. The interface for the Answer component is simply going to contain the answer data:

interface Props {
  data: AnswerData;
}

6. Now, the Answer component will simply render the answer content, along with who answered it and when it was answered:

export const Answer: FC<Props> = ({ data }) => (
  <div
    css={css`
      padding: 10px 0px;
    `}
  >
    <div
      css={css`
        padding: 10px 0px;
        font-size: 13px;
      `}
    >
      {data.content}
    </div>
    <div
      css={css`
        font-size: 12px;
        font-style: italic;
        color: ${gray3};
      `}
    >
      {`Answered by ${data.userName} on
      ${data.created.toLocaleDateString()} 
      ${data.created.toLocaleTimeString()}`}
    </div>
  </div>
);

7. Let's go back to QuestionPage.tsx and import AnswerList:

import { AnswerList } from './AnswerList';

8. Now, we can add AnswerList to the Fragment element:

{question !== null && (
  <Fragment>
    <p ... >
      {question.content}
    </p>
    <div ... >
      {`Asked by ${question.userName} on
  ${question.created.toLocaleDateString()} 
  ${question.created.toLocaleTimeString()}`}
    </div>
    <AnswerList data={question.answers} />
  </Fragment>
)}

If we look at the running app on the question page at questions/1, we'll see the answers nicely rendered:

That completes the work we need to do on the question page in this chapter. However, we need to allow users to submit answers to a question, which we'll cover in Chapter 5, Working with Forms.

Next up, we'll look at how we can work with query parameters with React Router.