1 min read

Build the Github Issue Filter component

Build the Github Issue Filter component

On the "Github Issues" page of a repository, you can filter the issues by Milestones, Projects and more.
Build a generic Filter component that you could use for filtering milestones, authors and labels.

  • the component should have a button that when clicked opens the list of items
  • the filtering should be done client side (i.e. load all data up front and pass it to the component)
  • clicking outside the items list should close the filter

You can use Tailwind CSS for styling, Floating UI (formerly Popper) for displaying the items container and React Icons for the icons.
Use the real Github API to fetch the data.

To get started, clone the starter repo that already comes preconfigured with the data fetching code, so you can focus on building the component.

When you're ready to check your work, check out the official solution.

Get a new challenge in your inbox every other week.

Learn React by practice. Get out of tutorial hell and finally be able to just build things.