Как сделать модальное окно с изменяющейся информации в нем?

Question

[Денис Соколов]

У меня есть компонент с Модальным окном и компонент с записями мне надо чтобы при нажатии на кнопку открывалось окно с нужной информацией

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)}>&times;</div>
                 </div>
                 {props.children}
             </div>
         </div>
     </div>
 )
}

const dataBasePost = [
{
    "id": "1",
    "title": "Объявление",
    "shortDescr": "Мы работаем со следующими поставщиками"
},
{
    "id": "2",
    "title": "Внимание",
    "shortDescr": "Мы работаем со следующими поставщиками"
}
]

Answer 1

[0xD34F]

https://jsfiddle.net/mwoLsdr7/

Comments

[Денис Соколов]

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

[0xD34F]

Денис Соколов, https://reactcommunity.org/react-transition-group/