React Js Multiple Modal - reactjs

Question

Hi i'm trying to learn react and i was tryign to make multiple modal but the same desgine and everything but different content inside it how?
import './Works.css';
import React, { useState } from 'react'
import Modal from '../Modal/Modal'
function Works(props){
const [isOpen, setIsOpen] = useState(false)
return(
<div>
<div className={props.NameClass}>
<h1>{props.icon}</h1>
<h1>{props.title}</h1>
<p >simple pargraph</p>
<button className="button_more" onClick={() => setIsOpen(true)}><i className="fas fa-caret-right"></i></button>
</div>
<Modal open={isOpen} title="hi" onClose={() => setIsOpen(false)}>
</Modal>
</div>
)
}
export default Works
and if you look at <Modal open={isOpen} title="here i wanna different title" onClose={() => setIsOpen(false)}>
and here the App.js calling the file on top multiple times but i wanna for example if someone click on the second project it change the title to for example "hi you're in the second modal!"
<div class="Div-Projects">
<Works NameClass="First_Project" icon="💳" title="first" />
<Works NameClass="Second_Project" icon="🎓" title="second" />
<Works NameClass="Third_Project" icon="👩🏻‍💻" title="third" />
</div>
and here the modal code!
import './Modal.css'
function Modal({open , title, onClose}){
if(!open) return null
return(
<div className="popup">
<div className="content">
<h1>{title}</h1>
<div className="p">
<p>login system for students attendees with an arduino and python it shows how fast and stable for doing the job.login system for students attendees with an arduino and python it shows how fast and stable for doing the job.login system for students attendees with an arduino and python it shows how fast and stable for doing the job.</p>
</div>
<div className="buttons">
<button className="dismiss" onClick={onClose}>Dismiss!</button>
<button className="github" onClick={() => window.open( 'https://github.com/Majiedo/Login_System')}><i className="fab fa-github"></i></button>
<button className="code"><i className="fas fa-code"></i></button>
</div>
</div>
</div>
)
}
export default Modal

Answer 1

Why don't you pass Works props to Modal component? Like this:
function Works(props){
const [isOpen, setIsOpen] = useState(false)
return(
<div>
<div className={props.NameClass}>
<h1>{props.icon}</h1>
<h1>{props.title}</h1>
<p >simple pargraph</p>
<button className="button_more" onClick={() => setIsOpen(true)}><i className="fas fa-caret-right"></i></button>
</div>
<Modal open={isOpen} title={`hi you're in the ${props.title} modal!`} onClose={() => setIsOpen(false)}/>
</div>
)
}

Answer 2

You need to pass in title {props.title}
change it:
<Modal open={isOpen} title="hi" onClose={() => setIsOpen(false)}>
</Modal>
On this:
<Modal open={isOpen} title={`hi you're in the ${props.title}`} onClose={() => setIsOpen(false)}/>