Блог

Я сделал фотогалерею с фильтром для категорий, но я хочу, чтобы кнопка «Активная категория» содержала active класс

Я отображаю кнопки, сопоставляя их с galleryData массивом

 {  galleryData.map((item, index) =gt; (  lt;button  key={index}  onClick={() =gt; filterGalley(item.category)}  className="filter-button"  gt;  {item.category}  lt;/buttongt;  )); }  

И после щелчка я фильтрую элементы галереи по категориям. value Это строка типа категории

 const filterGalley = (value) =gt; {  if (value === "all") {  setGalleryItems(galleryData);  return;  }   const filteredData = galleryData.filter((item) =gt; item.category === value);   console.log(value);  setGalleryItems(filteredData); };  

Как я могу передать active класс в просматриваемую в данный момент категорию? onMount должен быть all , а после этого тот, который нажат.

Определите состояние для категории activeCategory и используйте его для active класса:

 const [activeCategory, setActiveCategory] = useState('all'); const filterGalley = (value) =gt; {  setActiveCategory(value);  if (value === 'all') {  setGalleryItems(galleryData);  return;  }   const filteredData = galleryData.filter(  (item) =gt; item.category === value  );   console.log(value);  setGalleryItems(filteredData); };  

И используйте его:

 {galleryData.map((item, index) =gt; (  lt;button  key={index}  onClick={() =gt; filterGalley(item.category)}  className={"filter-button "   (activeCategory === item.category ? 'active' : '')}  gt;  {item.category}  lt;/buttongt; ))}