colors[index].name

Ребят, подскажите логику открытий/закрытий модального окна.

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

При нажатии на кнопку в компоненте, должно открываться модальное окно. А закрываться оно должно нажатием на эту затемнённую плажку.

Модальное окно и компонент, в котором оно открывается находятся в разных файлах.

прокидывай коллбек функцию, которая закрывает модалку

У меня сейчас так.
Использую хук useState.
И, при клике на кнопку меняется булеан значение с false на true. Изначально false. А потом при нажатии на true.
То есть не !bool, а именно true.

И, если true, то показываю этот компонент, в котором модальное окно.

И в том компоненте еще один useState. С такой же логикой при нажатии на затемнённую плажку.
Если false
return false
Иначе показывается модальное окно.

Но в таком случае, повторно открыть модальное окно невозможно

Не понял

ты можешь прокинуть в компонент проп isOpen
и в зависимости от него делать что нужно

Пропсы получит компонент, в котором модальное окно?

ну суть в том что у тебя один стейт должен быть, не два

Но, так не получится.
Так как модальное окно не зависит только от пропсов, у него и свой хук, которое зависит, нажал ли пользователь на черную плажку

Я вот спрашиваю, как сделать лучше. Как именно такую логику реализовать

покажи код

Он большой

Я думаю, я нормально обьяснил

у тебя один стейт на верхнем уровне
дальше в компоненты прокидывается только isOpen из твоего стейта

А как потом обратно?

обратно что?

Если нажали на затемнённую плажку

прокидывай в этот компонент пропс onClick={() => { setIsOpen(false) }}

Киньте ссылку на сайт или демо где есть Модальное окно - Но не простой:
1) При появлении мод. окна страница не прокручивается
2) Есть кнопка закрытии "х". При нажатии окно закрывается и не прыгает вверх, т.е. все остается на своих местах
3) При нажатии на маску тоже исчезает мод. окно и не прыгает страница.

ПОЖАЛУЙСТА подскажите если знаете такой сайт / демо . Спасибо!!!

Ребят, подскажите логику открытий/закрытий модального окна.

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

При нажатии на кнопку в компоненте, должно открываться модальное окно. А закрываться оно должно нажатием на эту затемнённую плажку.

Модальное окно и компонент, в котором оно открывается находятся в разных файлах.