ASP.NET Core 3 and React

Wiring up the components

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'; ...