У меня есть компонент с Модальным окном и компонент с записями мне надо чтобы при нажатии на кнопку открывалось окно с нужной информацией
export const CardNews = ({ active, setActive, ...props }) => {
return (
<div className="news-card">
<div className="news-card__content">
<div className="news-card__img">
<img src={image_1} alt="img" className="news-card__image" />
</div>
<div className="news-card__text">
<div className="news-card__title">{props.title}</div>
<div className="news-card__descr">{props.descr}</div>
<button className="check-news" id={props.id} onClick={() => setActive(true)}>
Читать
</button>
</div>
</div>
</div>
)
}
export const Modal = ({active, setActive, ...props}) => {
return (
<div className={active ? "modal active" : "modal"} id={props.id} onClick={() => setActive(false)}>
<div className={active ? "modal-overlay active" : "modal-overlay"}>
<div className="modal-window" onClick={(e) => e.stopPropagation()}>
<div className="modal-header">
<div className="modal-header__title">{props.title}</div>
<div className="modal-header__close" onClick={() => setActive(false)}>×</div>
</div>
{props.children}
</div>
</div>
</div>
)
}
const dataBasePost = [
{
"id": "1",
"title": "Объявление",
"shortDescr": "Мы работаем со следующими поставщиками"
},
{
"id": "2",
"title": "Внимание",
"shortDescr": "Мы работаем со следующими поставщиками"
}
]