Аккордеон

В этом решении мы создаём интерактивный аккордеон, где каждый элемент может раскрываться и закрываться независимо.

Булево состояние

const [isOpen, setIsOpen] = useState(false);

Мы используем булево (boolean) состояние - оно может быть только true или false. Это идеально подходит для случаев "да/нет", "включено/выключено", "открыто/закрыто". Начальное значение false означает, что все элементы аккордеона закрыты при загрузке.

Инверсия булева значения

const toggleOpen = () => {
    setIsOpen(!isOpen);
};

Оператор ! (логическое НЕ) инвертирует булево значение. Если isOpen было true, станет false, и наоборот. Это короткая и элегантная запись вместо длинной конструкции if-else. Каждый клик переключает состояние на противоположное.

Условные классы

className={`accordion-header ${isOpen ? 'open' : ''}`}

Базовый класс accordion-header присутствует всегда, а класс open добавляется только когда аккордеон раскрыт. CSS использует класс .open для применения стилей анимации и изменения внешнего вида. Если аккордеон закрыт, добавляется пустая строка, что не влияет на классы элемента.

Условное отображение иконки

{isOpen ? '▼' : '▶'}

Стрелка меняется в зависимости от состояния - вниз (▼) когда открыто, вправо (▶) когда закрыто. Это визуальная подсказка пользователю о текущем состоянии и о том, что произойдёт при клике.

Условный рендеринг контента

{isOpen && (
    <div className="accordion-content">
        {content}
    </div>
)}

Оператор && показывает контент только когда isOpen === true. Если условие ложно, React вообще не рендерит этот блок - элемент отсутствует в DOM. Это отличается от скрытия через CSS - элемент действительно не существует, когда аккордеон закрыт.

Независимое состояние каждого элемента

<AccordionItem title="Что такое React?" content="..." />
<AccordionItem title="Зачем нужен useState?"

Каждый AccordionItem имеет своё собственное состояние isOpen. Когда вы открываете один элемент, другие остаются в своём состоянии. Это происходит потому, что каждый экземпляр компонента создаёт свою собственную копию состояния - они не делятся данными между собой.