Implementing Component Props

Components can have properties that allow consumers to pass parameters into them, just like when we pass parameters into a JavaScript function. React function components accept a single parameter named props, which holds its properties. The word props is short for properties.

In this section, we’ll learn all about how to implement strongly typed props, including optional and default props. Then, we’ll implement the rest of the home page to assist in our learning.

Creating HomePage child components

We are going to implement some child components that the HomePage component will use. We will pass the unanswered questions data to the child components via props.

Creating the QuestionList component

Let’s go through the following steps to implement the QuestionList component:

1. Let’s create a file called QuestionList.tsx in the src folder and add the following import statements:

2. Now, let’s define the interface for the component props underneath the import statements:

We have called the props interface Props and it contains a single property to hold an array of questions. ...