> ## Content Index
> Fetch the complete content index at: https://reactpractice.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Build the Github Issue Filter component
- URL: https://reactpractice.dev/exercise/build-the-github-issue-filter-component/
- Published: 2024-07-16T07:42:17.000Z
- Updated: 2026-06-01T01:56:49.000Z
- Author: Corina Udrescu
- Tags: Building components, #corina-2, Exercises, Advanced, Design patterns, #Import 2026-06-09 12:07

On the "[Github Issues](https://github.com/facebook/react/issues?ref=reactpractice.dev)" 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](https://tailwindcss.com/?ref=reactpractice.dev) for styling, [Floating UI](https://floating-ui.com/?ref=reactpractice.dev) (formerly Popper) for displaying the items container and [React Icons](https://react-icons.github.io/react-icons/?ref=reactpractice.dev) for the icons.  
Use the real Github API to fetch the data.

To get started, [clone the starter repo](https://github.com/reactpractice-dev/github-issues-filter-component?ref=reactpractice.dev) that already comes preconfigured with the data fetching code, so you can focus on building the component.

💡

Ready to check your work?  
[Become a member](https://reactpractice.dev/become-a-member/) and get access to the [official solution](https://reactpractice.dev/solution/tutorial-build-the-github-issue-filter-component/) and the comments section for feedback and discussion.

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2024/07/Pasted-image-20240714172757.png)

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2024/07/Pasted-image-20240714172704.png)