Frontend

Let's take a quick look at final output : Modal.js File , which contains modal view and its content along with a close button import React from 'react' import './style.css' const Modal = ({open,close,modalText}) =>{ const classModal = open ? "modal--open" : "modal--close" return ( <div className={classModal}> <div className= "modal" > <span className= "close" onClick={close}>X< /span> <span className= "modalText" >{modalText}< /span> < /div> < /div> ) } export default Modal style.css file used in above file .modal { padding : 12px; background : blue; width : 320px; text-align : center ; } @keyframes fadeIn { from { opacity : 0; } to { opacity : 1; } } @keyframes fadeOut { from { opacity : 1; } to { opacity : 0; } } ....