Условное отображение класса на основе состояния для сопоставленных элементов

Question

https://codesandbox.io/s/vjonpw8xzl (не отвечает, просмотрите в новом окне / на полной странице, чтобы увидеть правильно)

желаемый результат: при нажатии значка вниз (развернуть) на каждой карточке они работают независимо друг от друга, открывая / закрывая расширенное меню className: expanded, переключая на className: 'show' и className: 'hide'

, что происходит: состояние в приложении обновляется, когда нажимается значок раскрытия и все раскрытыеменю открываются в унисон.

я понимаю, почему это происходит, я просто не знаю, как это исправить.

если бы это были мои собственные данные, я бы добавил это к каждому объекту в состоянии

isExpanded:false

и переключать его, но поскольку из API поступает множество данных, я не знаю, как это сделать.любая помощь приветствуется.

Answer 1

Вам нужно решить, какие состояния на самом деле определяют компонент и нужны для него.Поскольку isExpanded & toggleExpanded являются чем-то конкретным для компонента character, они должны находиться в этом компоненте.

Answer 2

Вместо обработки логики состояния для isExpanded в компоненте App вы можете переместить его в компонент Character и удалить все реквизиты isExpanded / toggleExpanded.