I made a photo gallery with a filter for categories, but I want to make the active category button to have the active
class
I display the buttons by mapping through the galleryData
array
{galleryData.map((item, index) => (
<button
key={index}
onClick={() => filterGalley(item.category)}
className="filter-button"
>
{item.category}
</button>
))}
And onClick I filter the gallery items by category. The value
is a string of category type
const filterGalley = (value) => {
if (value === 'all') {
setGalleryItems(galleryData);
return;
}
const filteredData = galleryData.filter(
(item) => item.category === value
);
console.log(value);
setGalleryItems(filteredData);
};
How can I pass the active
class to the currently viewed category? onMount should be all
and after that the one that’s clicked.