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 ! 🚀