How can use props text between React Components-CodePudding

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;

CodePudding user response：

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>

CodePudding user response：

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 };