Stateful Components

In the previous lesson, we saw how to build a stateless React component. By stateless, we mean that the component only receives input from the outside and it doesn’t need to calculate or manage any internal information to be able to render itself to the DOM.

While it’s great to have stateless components, sometimes, we have to manage some kind of state and React allows us to do that. So, let’s learn how with an example.

A simple React application

Let’s build a React application that displays a list of projects that have been recently updated on GitHub.

We can encapsulate all the logic for asynchronously fetching the data from GitHub and displaying it on a dedicated component: the RecentGithubProjects component. This component is configurable through the query prop, which allows us to filter the projects on GitHub. The query prop will receive a keyword such as the “javascript” or “react” keywords, and this value will be used to construct the API call to GitHub.

Let’s finally take a look at the code of the RecentGithubProjects component.