Now, we can wire up the components we have just created using the props so that we get the unanswered questions rendered on the home page. Follow these steps to do so:

1. Let's go back to QuestionList.tsx and import the Question component we just created:

import { Question } from './Question';

2. Now, we can place an instance of the Question component in the QuestionList JSX nested within ListItem:

{data.map(question => (
  <li ... >
    <Question data={question} />
  </li>
))}

3. Moving on to the HomePage component in HomePage.tsx, let's import the QuestionList component. Let's also import the getUnansweredQuestions function we created earlier, which returns some mock questions:

import { QuestionList } from './QuestionList';
import { getUnansweredQuestions } from './QuestionsData';

4. Now, we can place an instance of QuestionList in the HomePage component JSX inside the outermost div tag:

<div css={ ... } >
  <div css={ ... } >
    <h2 css={ ... } >
      Unanswered Questions
    </h2>
    <PrimaryButton>Ask a question</PrimaryButton>
  </div>
  <QuestionList data={getUnansweredQuestions()} />
</div>

Notice that we pass the array of questions into the data prop by calling the getUnansweredQuestions function we created and imported earlier in this chapter.

5. If we look at the running app now, we'll see one unanswered question nicely rendered:

Our home page is looking nice now. We are going to finish this section on props by understanding optional and default props, which can make our components more flexible for consumers.