Implementing Component State

Components can use what is called state to have the component re-render when a variable in the component changes. This is crucial for implementing interactive components. For example, when filling out a form, if there is a problem with a field value, we can use state to render information about that problem. State can also be used to implement behavior when external things interact with a component, such as a web API. We are going to do this in this section after changing the getUnansweredQuestions function in order to simulate a web API call.

Changing getUnansweredQuestions so that it’s asynchronous

The getUnansweredQuestions function doesn’t simulate a web API call very well because it isn’t asynchronous. In this section, we are going to change this. Follow these steps to do so:

1. Open QuestionsData.ts and create an asynchronous wait function that we can use in our getUnansweredQuestions function: