Follow these steps to implement the Question component:

1. Create a file called Question.tsx that contains the following import statements:

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

2. Let's create the props for the Question component, which will simply contain a prop for the question data:

interface Props {
  data: QuestionData;
}

3. Now, we can create the component:

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

So, we are rendering the question title, who asked the question, and when it was asked.

Notice that we use the toLocaleDateString and toLocaleTimeString functions on the data.created Date object to output when the question was asked, formatted in the browser's locale.

That completes our Question component nicely.