Manage State using React Context API

Filter Product List using React Context

To share data between component in react you can pass the data through props from parent to child component. The problem is when data you need have some level between parent to child component. So you must pass the data on each component from the parent to child (Props Drilling). To avoid props drilling you can use state management like Zustand, Redux, React Context etc.

In this article will show you how to share data filter to filter product and show label active filter using React Context API.

Preview: Filter Product with React Context API

Prerequisite:

1. Next JS 13.5
2. Radix UI/React Icon

// Create new app
npx create-next-app@latest

// Add Icon Package
npm i @radix-ui/react-icons

After install next and icon package we can start to create the UI

Step 1: Create UI

1. Index Page

Modify file /app/page.tsx like this following code:

import FilterComponent from "@/components/filter";
import Products from "@/components/product"…