Как добавить/удалить класс по клику в реакте?

Question

[LaTherapist]

https://jsfiddle.net/rafm8ue9/

Делаю подобную галерею с фильтрацией с помощью реакта.
При клике отфильтровать картинки получилось.

А вот с добавлением/удалением класса с определенного фильтра по клику - беда.
Подскажите, пожалуйста.

Comments

[WbICHA]

в реакте

А реакт где?

[LaTherapist]

WbICHA, это визуальный пример галереи, чтобы люди понимали, о чем я.
На реакте пока не могу)

[WbICHA]

LaTherapist, эээээ... Ну ок.
<... className={showClass ? 'class' : ''} .../>

Answer 1

[seropaski]

Что насчет сделать список всех картинок с указаниями типа изображения + сделать стейт для хранение текущего выбранного типа изображения, а после рендерить по списку изображений компонент картинки и в него прокидывать выбранный тип, после чего в компоненте картинки принимать уже решение - рендерить ли изображение или вернуть null?

Как по мне, это более реактовский подход решения задачи, нежели добавление и удаление классов у элементов дом дерева

Answer 2

[LaTherapist]

https://jsfiddle.net/4jqsd29p/1/

Это то, что я пытался делать.
При клике выполняется функция, сортирующая картинки.
Но если я пытаюсь использовать useState, как внизу, то класс присваивается всем фильтрам.
Не знаю, как это исправить.

Также пытался добавить класс active через свойство массива объектов, но тоже как-то не очень.