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.
Define a state for activeCategory and use it for active class:
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);
};
And use it:
{galleryData.map((item, index) => (
<button
key={index}
onClick={() => filterGalley(item.category)}
className={"filter-button " + (activeCategory === item.category ? 'active' : '')}
>
{item.category}
</button>
))}