How can use props text between React Components - reactjs

Question

I am trying to appear text from main App.js to component via props. How can take Todos text from App.js to Modal Component in Modal Heading Text. Such as
Are you sure? "and the name of Todo"
App.js
import Todo from "./components/Todo";
function App() {
return (
<div>
<h1>My Todos</h1>
<Todo text="Learn React" />
<Todo text="Master React" />
<Todo text="Explore the full React course" />
</div>
);
}
export default App;
Modal Component Code
function Modal(props){
function cancelhandler(){
props.onCancel();
}
function confirmlhandler(){
props.onConfirm();
}
return (
<div className="modal">
<p>Are you sure?</p>
<button className="btn btn--alt" onClick={cancelhandler}>Cancel</button>
<button className="btn" onClick={confirmlhandler}>Confirm</button>
</div>
);
}
export default Modal;
Todo Component
import Modal from './Modal';
import Backdrop from './Backdrop';
function Todo(props){
return (
<div className="card">
<h2>{props.text}</h2>
<div className="actions">
<button className="btn">Delete</button>
</div>
</div>
);
}
export default Todo;

Answer 1

You can pass text from Todo to Modal as:
<Modal text={props.text} />
CODESANDBOX LINK
and show it in Modal as:
<p>Are you sure you want to delete {props.text}?</p>

Answer 2

There are a few ways to pass this value.
By props:
In Todo Component when declaring Modal Component you can pass variable
components/Todo.jsx
<div className="card">
<h2>{props.text}</h2>
modalStatus ? <Modal headline={props.text} /> : null; // I have used state here to determine when modal shall be visible
<div className="actions">
<button className="btn">Delete</button>
</div>
</div>
components/Modal.jsx
<div className="modal">
<p>Are you sure? {props.headline}</p>
<button className="btn btn--alt" onClick={cancelhandler}>Cancel</button>
<button className="btn" onClick={confirmlhandler}>Confirm</button>
</div>
If you have a few components when you want to pass variables you should use useContext instead of props drilling.
components/Todo.jsx
import Modal from "./Modal";
import modalContext from "../contexts/modalContext";
import { useState } from "react";
function Todo(props) {
const [modalOpen, setModalOpen] = useState(false);
return (
<div className="card">
<h2>{props.text}</h2>
<modalContext.Provider value={props.text}>
{modalOpen ? <Modal /> : null}
</modalContext.Provider>
<div className="actions">
<button className="btn">Delete</button>
</div>
</div>
);
}
export default Todo;
contexts/modalContext.jsx
import { createContext } from "react";
const modalContext = createContext(null);
export { modalContext };