Как показывать и скрывать компонент по клику в React?

В React отображение элементов управляется состоянием. Чтобы показать или скрыть компонент по клику, нужно хранить булево значение в состоянии и переключать его при событии. React автоматически перерисует интерфейс при изменении состояния.

Базовый пример с useState

Используем хук useState для хранения флага видимости и функцию-обработчик для его переключения:

import { useState } from 'react';

function App() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Скрыть' : 'Показать'}
      </button>
      {isVisible && <p>Секретный контент</p>}
    </div>
  );
}

Варианты условного рендеринга

• Оператор && — рендерит элемент, если условие истинно.
• Тернарный оператор — выбирает один из двух вариантов.
• Возврат null — компонент не отображается, но остаётся в дереве.

Для скрытия без удаления из DOM можно использовать CSS-класс с display: none, но это не всегда оптимально, так как компонент продолжает существовать.

Когда применять

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