J'ai une liste qui rend certains produits, ces produits sont divisés en certaines catégories.

J'essaie d'appliquer un filtre avec ces catégories via des cases à cocher. Lorsque l'utilisateur coche la case, la liste doit être mise à jour avec la catégorie sélectionnée.

Je voudrais savoir comment rendre une liste de produits en fonction de la sélection de la case à cocher ?

J'ai mis mon code dans codesandbox car a un beaucoup de fichiers.

Par exemple, ici, je souhaite afficher uniquement les produits des catégories Chypre et Floriental.

enter image description here

Ici, je rends ma liste de produits :

import React, { useState, useMemo, useEffect } from "react";
import { useSelector } from "react-redux";

import CardItem from "../CardItem";
import Pagination from "../Pagination";
import Search from "../Search";
import { useStyles } from "./styles";

const Card = (props) => {
  const { activeFilter } = props;
  const classes = useStyles();
  const data = useSelector((state) => state.perfume.collections);
  const [searchPerfume, setSearchPerfume] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const [perfumesPerPage, setPerfumesPerPage] = useState(3);

  console.log("activeFilter: ", activeFilter);

  const orderList = data
    .map((item) => ({
      ...item,
      totalSize: item.sizes.reduce((sum, cur) => sum + cur.price, 0)
    }))
    .sort((a, b) => a.totalSize - b.totalSize);

  const filteredPerfumes = useMemo(() => {
    return orderList.filter((perfume) =>
      perfume.name.toLowerCase().includes(searchPerfume.toLowerCase())
    );
  }, [orderList, searchPerfume]);

  const currentPerfumes = filteredPerfumes.slice(
    (currentPage - 1) * perfumesPerPage,
    currentPage * perfumesPerPage
  );
  const pages = Math.ceil(filteredPerfumes.length / perfumesPerPage);

  useEffect(() => {
    if (currentPage > pages) {
      setCurrentPage(1);
    }
  }, [currentPage, pages]);

  const pageNumbers = Array(pages)
    .fill(null)
    .map((val, index) => index + 1);

  const handleClick = (page) => {
    setCurrentPage(page);
  };

  return (
    <div>
      <Search
        data-testid="input-filter-id"
        setSearchPerfume={setSearchPerfume}
      />
      {currentPerfumes
        .filter((perfume) => {
          return (
            perfume.name.toLowerCase().indexOf(searchPerfume.toLowerCase()) >= 0
          );
        })
        .map((item) => (
          <CardItem key={item.id} item={item} />
        ))}
      <Pagination
        pageNumbers={pageNumbers}
        handleClick={handleClick}
        currentPage={currentPage}
      />
    </div>
  );
};

export default Card;

Merci d'avance.

2
Tainara 12 oct. 2020 à 13:55

1 réponse

Meilleure réponse

Essayez celui-là

 const filteredPerfumes = useMemo(() => {
    const filtered = orderList.filter((perfume) =>
      perfume.name.toLowerCase().includes(searchPerfume.toLowerCase())
    );

    if (activeFilter.length > 0) {
      return filtered.filter((item) => item.categories.some((a) =>
        activeFilter.some((v) => v.text === a)
      ));
    }
    return filtered;
  }, [orderList, searchPerfume]);
3
Oyeme 12 oct. 2020 à 14:07