В этом задании мы создадим модальное окно, которое появляется поверх основного контента.
Модальное окно - это всплывающий элемент интерфейса, который блокирует взаимодействие с остальной страницей. Это как диалоговое окно в операционной системе - пока оно открыто, вы работаете только с ним.
Модальное окно обычно состоит из двух частей: затемнённого фона (overlay) и самого контента. Клик по фону закрывает окно, а клик по контенту - нет.
Для управления видимостью модалки используем булево состояние в родительском компоненте:
const[isOpen, setIsOpen]=useState(false);
Затем передаём это состояние и функцию закрытия в компонент через props:
Внутри компонента Modal используем ранний return - если окно закрыто, сразу возвращаем null и ничего не рендерим:
if(!isOpen)returnnull;
Важный момент - предотвращение всплытия событий. Когда пользователь кликает по контенту модалки, мы не хотим, чтобы событие дошло до overlay и закрыло окно:
<divonClick={(e)=> e.stopPropagation()}>
Метод stopPropagation() останавливает распространение события вверх по дереву DOM.
Задание
Необходимо создать модальное окно с управлением открытия/закрытия. В компоненте App создайте состояние isModalOpen с начальным значением false. Реализуйте функции openModal (устанавливает isModalOpen в true) и closeModal (устанавливает в false). Передайте isModalOpen как prop isOpen и closeModal как prop onClose в компонент Modal. Компонент Modal уже реализован и принимает эти props для управления видимостью.
