Build the Github Issue Filter component
![Build the Github Issue Filter component](/content/images/size/w960/2024/07/Pasted-image-20240714172816.png)
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.
![](https://reactpractice.dev/content/images/2024/07/Pasted-image-20240714172757.png)
![](https://reactpractice.dev/content/images/2024/07/Pasted-image-20240714172704.png)
Member discussion