Add Modal Component To Card component in React - reactjs

Question

I have created two different components, one for a card and one for a modal. What I would like to do now is to connect them together so that when I click the button on the card component, I would like the modal to open up on the screen. I have tried all that I can but can't seem to get it right.
Here is the card compenent:
import img from './112803.jpg';
import GitHub from './github-white.png';
import Website from './website-white.png';
import ModalButton from './ModalButton.js'
function Card(props) {
return (
<div className="card">
<div className="cardBody">
<div className="imageOverlay">
<img className="imageOverlayImg" src={img} alt="landscape" />
<div className="imageOverlayDescription">
<a href={props.gitHub} target="_blank" rel="noopener noreferrer">
<img src={GitHub} alt="GitHub Icon" />
</a>
<a href={props.liveSite} target="_blank" rel="noopener noreferrer">
<img src={Website} alt="liveSite Icon" />
</a>
</div>
</div>
<h2 className="cardTitle">{props.heading}</h2>
<p className="cardDescription">{props.description}</p>
</div>
<button className="cardButton">More Information</button>
</div>
);
}
export default Card;
And here is the modal component:
const Modal =(props)=>{
return(
<>
{props.showModal ? (
<div className="background">
<div className='modalWrapper' showModal={props.showModal}>
<img clasName="modalImg" src={require('./deals.jpg').default} alt="A Landscape" width="100%" height="100%"/>
<div className="modalContent">
<h1>{props.heading}</h1>
<p>{props.description}</p>
<p>{props.madeBy}</p>
<div className="buttonLayout">
<button className="innerModalButton">View Code</button>
<button className="innerModalButton">Live Site</button>
</div>
</div>
<button className="closeModalButton" aria-label="Close modal" onClick={()=>
props.setShowModal(prev => !prev)}>Close</button>
</div>
</div>
) : null}
</>
);
}
And here is some of the logic that the modal needs in order to pop up
const [showModal,setShowModal] = useState(false);
const openModal = () =>{
setShowModal(prev => !prev)
I am still a bit of a beginner and I'm not too sure how to get the project done. Any help would be greatly appreciated. Thank you.

Answer 1

Just add a state in Card pass pass it into Modal:
const [showModal,setShowModal] = useState(false);
...
<Modal
showModal={showModal}
setShowModal={setShowModal}
//...another props to display content
/>

Answer 2

From my understanding of what is going on, it looks like your modal button isn't doing anything. I would suggest you add an onClick method to it.
<button className="cardButton" onClick={()=> setShowModal(true)}> More Information</button>
Also like the answer above, pass the state from the card to the Modal
That could do it.
Let me know if it helped.