Introduction
While working on my latest project, I hit a roadblock: I needed to create a category menu to help organize and navigate content. It was a bit challenging at first, but after figuring it out, I wanted to share my experience. This guide will walk you through creating a dynamic category menu component in React, making the process as enjoyable and straightforward as possible. Let's dive in and build this together!
Hint
To use the ChevronRight
icon component from lucide-react
with Tailwind CSS, ensure that you have lucide-react
installed as a dependency in your project and that Tailwind CSS is set up. You can add lucide-react
using npm or yarn
Here is what our data looks like:
[
{
id: "1",
name: "Job",
image: image,
parent_id: null,
created_at: "2023-01-01T00:00:00Z",
updated_at: "2023-01-01T00:00:00Z",
},
{
id: "2",
name: "Vehicules",
image: image,
parent_id: null,
created_at: "2023-01-01T00:00:00Z",
updated_at: "2023-01-01T00:00:00Z",
},
{
id: "3",
name: "Cars",
image: image,
parent_id: "2",
created_at: "2023-01-01T00:00:00Z",
updated_at: "2023-01-01T00:00:00Z",
},
{
id: "4",
name: "Motos",
image: image,
parent_id: "2",
created_at: "2023-01-01T00:00:00Z",
updated_at: "2023-01-01T00:00:00Z",
},
{
id: "5",
name: "Real Estate",
image: image,
parent_id: null,
created_at: "2023-01-01T00:00:00Z",
updated_at: "2023-01-01T00:00:00Z",
}
]
Dive into the Code
First, import useState
from React. This helps track the selected categories. Declare three states: selectedParent
, selectedChild
, and selectedCategory
.
import React, { useState } from "react";
const CategorieMenu = () => {
const [selectedParent, setSelectedParent] = useState(null);
const [selectedChild, setSelectedChild] = useState(null);
const [selectedCategory, setSelectedCategory] = useState(null);
// rest of your react component
};
Handling Clicks Changes Everything!
Next, add functions to manage clicks. When a user clicks on a parent or child category, update our states with setSelectedParent
, setSelectedChild
, and setSelectedCategory
.
const handleParentClick = (categoryId) => {
setSelectedParent(categoryId);
setSelectedChild(null); // Reset child
setSelectedCategory(categoryId);
};
const handleChildClick = (categoryId) => {
setSelectedChild(categoryId);
setSelectedCategory(categoryId);
};
Displaying Child Categories!
Now, create a function to display child categories when a parent category is selected. Use a filter to find the children and render them dynamically.
const renderChildren = (parentId) => {
return categories
.filter((category) => category.parent_id === parentId)
.map((child) => (
<li
onClick={() => handleChildClick(child.id)}
key={child.id}
className={`ml-4 hover:text-primary group flex justify-between items-center cursor-pointer hover:font-semibold p-2 ${
selectedChild === child.id
? "text-primary font-semibold border-l-[3px] border-primary "
: ""
}`}
>
{child.name}
</li>
));
};
Putting It All Together!
Finally, combine everything in our component. Render parent and child categories, and apply styles to make it interactive and user-friendly.
return (
<div className="bg-background flex w-full">
<ul className="lg:flex-[0.8] w-full">
{categories
.filter((category) => !category.parent_id)
.map((parent) => (
<li key={parent.id}>
<div
className={`w-full hover:text-primary hover:font-semibold border-b lg:border-0 group flex justify-between items-center p-2 cursor-pointer ${
selectedParent === parent.id
? "text-primary lg:border-l-[3px] lg:border-primary font-semibold"
: ""
}`}
onClick={() => handleParentClick(parent.id)}
>
{parent.name}
{categories.some(
(category) => category.parent_id === parent.id
) && (
<span
className={` ${
selectedParent === parent.id ? "lg:block" : "lg:hidden"
} lg:group-hover:block`}
>
<ChevronRight className="text-primary" />
</span>
)}
</div>
</li>
))}
</ul>
<div className="hidden lg:block border-l-2 lg:flex-[1.2] pl-2">
{selectedParent && (
<ul className="space-y-4">{renderChildren(selectedParent)}</ul>
)}
</div>
</div>
);
Voila, You Have a Category Menu!
And there you have it, an interactive category menu in React! Now you can navigate through your categories with style. Ready to take your React project to the next level? Have fun coding! 🚀