Модальное окно

В этом решении мы создаём модальное окно с управлением открытия/закрытия через состояние в родительском компоненте.

Состояние в родительском компоненте

const [isModalOpen, setIsModalOpen] = useState(false);

Состояние модального окна хранится в родительском компоненте App, а не в самом Modal. Это важный паттерн - родитель контролирует, когда модалка открыта или закрыта. Начальное значение false означает, что модалка скрыта при загрузке страницы.

Функции управления

const openModal = () => {
    setIsModalOpen(true);
};

const closeModal = (

Мы создаём две отдельные функции для открытия и закрытия. Это делает код более читаемым - в onClick мы пишем openModal вместо () => setIsModalOpen(true). Функцию closeModal мы передадим в дочерний компонент.

Передача props

<Modal isOpen={isModalOpen} onClose={closeModal} />

Мы передаём состояние isModalOpen как prop isOpen и функцию closeModal как prop onClose. Компонент Modal получает данные и функции от родителя, но не управляет состоянием напрямую. Это называется "подъём состояния" - состояние живёт в родителе, а дочерний компонент только использует его.

Ранний return

if (!isOpen) return null;

Это первая строка в компоненте Modal. Если isOpen ложно, функция сразу возвращает null, и React ничего не рендерит. Весь остальной код компонента не выполняется. Это эффективнее, чем условный рендеринг всей разметки - компонент полностью отсутствует в DOM, когда модалка закрыта.

Закрытие по клику на overlay

<div className="modal-overlay" onClick={onClose}>

Затемнённый фон (overlay) закрывает модалку при клике. Мы вызываем функцию onClose, которая пришла через props. Это вызовет closeModal в родительском компоненте, что обновит состояние и закроет модалку.

Предотвращение всплытия события

<div 
    className="modal-content" 
    onClick={(e) => e.stopPropagation(

События в DOM всплывают вверх - если вы кликаете на контент модалки, событие сначала срабатывает на modal-content, затем на modal-overlay. Метод stopPropagation() останавливает это всплытие. Без него клик по контенту закрывал бы модалку, потому что событие дошло бы до overlay.

Несколько способов закрытия

<button className="modal-close" onClick={onClose}>✕</button>
<button className

Мы предоставляем пользователю несколько способов закрыть окно - крестик в углу, кнопка внизу и клик по фону. Все они вызывают одну и ту же функцию onClose. Это улучшает пользовательский опыт - каждый может выбрать удобный способ.