Столкнулся с проблемой с collapsable кнопкой в функции map() на React.

Вопрос или проблема

.

Ответ или решение

Для решения проблемы с раскрывающимися элементами в React, использующими функцию map(), необходимо контролировать состояние каждого элемента отдельно. Когда все элементы расширяются или сворачиваются одновременно при нажатии, скорее всего, причина кроется в неэффективном управлении состоянием. Ниже представлены рекомендации и разъяснения для исправления данной ситуации.

Шаг 1: Управление состоянием

Первым делом, вам необходимо хранить состояние открытия для каждого элемента отдельно. Вместо одного общего состояния open, подходящим решением будет использование объекта состояния, где ключами являются идентификаторы элементов, а значениями — состояния (открыт/закрыт) каждого из них.

Пример кода

Рассмотрим, как это можно реализовать на практике:

import React, { useState } from 'react';

const CollapsibleList = ({ items }) => {
    const [openItems, setOpenItems] = useState({});

    const handleBlogClick = (id) => {
        setOpenItems(prevState => ({
            ...prevState,
            [id]: !prevState[id] // Смена состояния для конкретного элемента
        }));
    };

    return (
        <div>
            {items.map(item => (
                <div key={item.id}>
                    <button onClick={() => handleBlogClick(item.id)}>
                        {openItems[item.id] ? 'Свернуть' : 'Развернуть'}
                    </button>
                    {openItems[item.id] && (
                        <div className="collapsible-content">
                            {/* Контент, который нужно развернуть */}
                            {item.content}
                        </div>
                    )}
                </div>
            ))}
        </div>
    );
};

export default CollapsibleList;

Объяснение кода

1. Состояние openItems: Используем хук useState, чтобы создать объект openItems, который будет содержать состояние каждого элемента. Ключами являются идентификаторы элементов, а значениями — логические переменные, указывающие на то, открыт элемент или закрыт.

2. Функция handleBlogClick: Эта функция отвечает за смену состояния конкретного элемента. Когда пользователь нажимает кнопку, мы обновляем состояние для данного идентификатора, меняя его на противоположное.

3. Отрисовка элементов: Мы используем метод map(), чтобы перебрать массив элементов. Для каждой кнопки определяем, какой текст отображать на кнопке («Свернуть» или «Развернуть») в зависимости от состояния openItems[item.id].

Заключение

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

Если вам понадобятся дополнительные разъяснения или возникнут новые вопросы, не стесняйтесь обращаться за помощью.