Créer un Menu de Catégorie Dynamique dans React : Guide pour les Débutants
Introduction
Alors que je travaillais sur mon dernier projet, j'ai rencontré un problème : j'avais besoin de créer un menu de catégorie pour m'aider à organiser et à naviguer dans le contenu. C'était un peu difficile au début, mais après avoir résolu le problème, j'ai voulu partager mon expérience. Ce guide vous aidera tout au long de la création d'un composant de menu de catégorie dynamique dans React, en rendant le processus aussi agréable et simple que possible. Allons-y et construisons cela ensemble !
Voici à quoi ressemblent nos données:
[
{
"id": "1",
"name": "Emploi",
"image": "image",
"parent_id": null,
"created_at": "2023-01-01T00:00:00Z",
"updated_at": "2023-01-01T00:00:00Z"
},
{
"id": "2",
"name": "Véhicules",
"image": "image",
"parent_id": null,
"created_at": "2023-01-01T00:00:00Z",
"updated_at": "2023-01-01T00:00:00Z"
},
{
"id": "3",
"name": "Voitures",
"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": "Immobilier",
"image": "image",
"parent_id": null,
"created_at": "2023-01-01T00:00:00Z",
"updated_at": "2023-01-01T00:00:00Z"
}
]
Plongez dans le Code
Tout d'abord, importez useState
de React. Cela vous aidera à suivre les catégories sélectionnées. Déclarez trois états : selectedParent
, selectedChild
et selectedCategory
.
import React, { useState } from "react";
const CategorieMenu = () => {
const [selectedParent, setSelectedParent] = useState(null);
const [selectedChild, setSelectedChild] = useState(null);
const [selectedCategory, setSelectedCategory] = useState(null);
// reste de votre composant React
};
Les Clics Changent Tout !
Ensuite, ajoutez des fonctions pour gérer les clics. Lorsqu'un utilisateur clique sur une catégorie parente ou enfant, mettez à jour vos états avec setSelectedParent
, setSelectedChild
et setSelectedCategory
.
const handleParentClick = (categoryId) => {
setSelectedParent(categoryId);
setSelectedChild(null); // Réinitialise l'enfant
setSelectedCategory(categoryId);
};
const handleChildClick = (categoryId) => {
setSelectedChild(categoryId);
setSelectedCategory(categoryId);
};
Afficher les Catégories Enfants !
Maintenant, créez une fonction pour afficher les catégories enfants lorsque une catégorie parente est sélectionnée. Utilisez un filtre pour trouver les enfants et les afficher de manière dynamique.
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>
));
};
Mettre tout en Place !
Enfin, combinez tout dans notre composant. Affichez les catégories parentes et enfants, et appliquez des styles pour les rendre interactifs et conviviaux.
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>
);
Voilà, Vous Avez un Menu de Catégorie !
Et voilà, vous avez un menu de catégorie interactif dans React ! Maintenant, vous pouvez naviguer à travers vos catégories avec style. Prêt à prendre votre projet React au niveau suivant ? Amusez-vous en codant ! 🚀