Hice una galeria de fotos con filtro por categorias, pero quiero hacer el boton de categoria activa para tener la clase active
Muestro los botones mapeándolos a través de la matriz galleryData
{ galleryData.map((item, index) => ( <button key={index} onClick={() => filterGalley(item.category)} className="filter-button" > {item.category} </button> )); } Y al hacer clic, filtro los elementos de la galería por categoría. El value es una cadena de tipo de categoría.
const filterGalley = (value) => { if (value === "all") { setGalleryItems(galleryData); return; } const filteredData = galleryData.filter((item) => item.category === value); console.log(value); setGalleryItems(filteredData); }; ¿Cómo puedo pasar la clase active a la categoría visualizada actualmente? onMount debería ser all y después de eso el que se hizo clic.
Defina un estado para activeCategory y utilícelo para la clase active :
const [activeCategory, setActiveCategory] = useState('all'); const filterGalley = (value) => { setActiveCategory(value); if (value === 'all') { setGalleryItems(galleryData); return; } const filteredData = galleryData.filter( (item) => item.category === value ); console.log(value); setGalleryItems(filteredData); };Y úsalo:
{galleryData.map((item, index) => ( <button key={index} onClick={() => filterGalley(item.category)} className={"filter-button " + (activeCategory === item.category ? 'active' : '')} > {item.category} </button> ))}