javascript - How to make a dynamic modal in React? - Stack Overflow

admin管理员组

文章数量:1418380

I would like to open a modal when I click on a card, and this modal contains more informations about the card content that was clicked.

Here in my example, the cards are replaced by buttons.

So here how to change the modal content depending on the button clicked ?

I saw this post : Change react-modal data dynamically. But I don't understand his solution.

App.js :

function App() {
    const [modal, setModal] = useState({ show: false, data: null });

    const openNoWebsite = () => {
        setModal({ show: true, data: { title: 'No website in sight', subtitle: 'Having a website in 2021 is essential.' } });
    };

    const openMoreMoney = () => {
        setModal({ show: true, data: { title: 'More money', subtitle: "You think you have an awesome product, but people don't really notice it and your sales numbers are not going up."} });

    const handleCloseModal = () => {
        setModal({ show: false, data: null });
    };
   return {
   <div className="main">
      <button className="solidText" onClick={openNoWebsite}>
      Button 1
      </button>
    <button className="solidText" onClick={openMoreMoney}>
      Button 2
      </button>
      {modal.show && modal.data && <Modal closeModal={handleCloseModal} />}

   </div>
   }
}

Modal.jsx :

function Modal({ closeModal, data }) {
    return (
        <div className="modal-container">
            <div className="modal">
                <button className="btn btn--close" onClick={() => closeModal()}>X</button>
                <div className="modal__body">
                    <h1 className="modal__title">{data.title}</h1>
                    <h2 className="modal__subtitle">{data.subtitle}</h2>
                    <ul>
                        <span>How I will help you :</span>
                        <li>Discover together your goals through a strategy session</li>
                        <li>Discuss about the possible solutions to implement</li>
                        <li>A glorious online presence a.k.a. website</li>
                    </ul>
                </div>
                <div className="modal__footer">
                    <p>Wanna put your business out there ?</p>
                    <button className="btn btn--main">LET'S TALK</button>
                </div>
            </div>
        </div>
    )
}

I would like to open a modal when I click on a card, and this modal contains more informations about the card content that was clicked.

Here in my example, the cards are replaced by buttons.

So here how to change the modal content depending on the button clicked ?

I saw this post : Change react-modal data dynamically. But I don't understand his solution.

App.js :

function App() {
    const [modal, setModal] = useState({ show: false, data: null });

    const openNoWebsite = () => {
        setModal({ show: true, data: { title: 'No website in sight', subtitle: 'Having a website in 2021 is essential.' } });
    };

    const openMoreMoney = () => {
        setModal({ show: true, data: { title: 'More money', subtitle: "You think you have an awesome product, but people don't really notice it and your sales numbers are not going up."} });

    const handleCloseModal = () => {
        setModal({ show: false, data: null });
    };
   return {
   <div className="main">
      <button className="solidText" onClick={openNoWebsite}>
      Button 1
      </button>
    <button className="solidText" onClick={openMoreMoney}>
      Button 2
      </button>
      {modal.show && modal.data && <Modal closeModal={handleCloseModal} />}

   </div>
   }
}

Modal.jsx :

function Modal({ closeModal, data }) {
    return (
        <div className="modal-container">
            <div className="modal">
                <button className="btn btn--close" onClick={() => closeModal()}>X</button>
                <div className="modal__body">
                    <h1 className="modal__title">{data.title}</h1>
                    <h2 className="modal__subtitle">{data.subtitle}</h2>
                    <ul>
                        <span>How I will help you :</span>
                        <li>Discover together your goals through a strategy session</li>
                        <li>Discuss about the possible solutions to implement</li>
                        <li>A glorious online presence a.k.a. website</li>
                    </ul>
                </div>
                <div className="modal__footer">
                    <p>Wanna put your business out there ?</p>
                    <button className="btn btn--main">LET'S TALK</button>
                </div>
            </div>
        </div>
    )
}

• javascript
• reactjs

Share Improve this question Follow edited Aug 4, 2021 at 16:18 Pandounours asked Aug 4, 2021 at 15:18 PandounoursPandounours 2111 silver badge44 bronze badges 9

• You add a state variable to your App ponent that is named something like selectedCard or someting, and based on that value you can render different stuff in the modal. – hellogoodnight Commented Aug 4, 2021 at 15:22
• @hellogoodnight I update my code what I did wrong ? – Pandounours Commented Aug 4, 2021 at 15:39
• You can do a modalState object that contain a show (to know when to open the modal) and data property, so when you click on a button/Card you can update the data accordingly to what you want to display. – Nicolas Menettrier Commented Aug 4, 2021 at 15:42
• @NicolasMenettrier can you show an example as response ? I'm really new to react and struggling a little – Pandounours Commented Aug 4, 2021 at 15:44
• Just did it, tell me if you have any question – Nicolas Menettrier Commented Aug 4, 2021 at 15:58

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 4

What you can do is to use a state that contain the data you want to show inside your Modal, usually what I do is that I create a state const [modal, setModal] = useState({ show:false, data: null }) and when I press a button I update data accordingly to what I want to show.

Here I used car caracteristic put you can put whatever you want (description, big text, etc...).

The state show is not really usefull but I prefer to use it for clarity (you can just check if !data to know if you want to open or not your modal)

Example

function Modal({ closeModal, data }) {
  return (
    <div className="modal-container">
      <div className="modal">
        <button className="btn btn--close" onClick={() => closeModal()}>
          X
        </button>
        <div className="modal__body">
          <h1 className="modal__title">
            {data.name} {data.color}
          </h1>
          <h2 className="modal__subtitle">Having a website in 2021 is essential.</h2>
          <ul>
            <span>How I will help you :</span>
            <li>Discover together your goals through a strategy session</li>
            <li>Discuss about the possible solutions to implement</li>
            <li>A glorious online presence a.k.a. website</li>
          </ul>
        </div>
        <div className="modal__footer">
          <p>Wanna put your business out there ?</p>
          <button className="btn btn--main">{data.name}</button>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [modal, setModal] = useState({ show: false, data: null });

  const openAudi = () => {
    setModal({ show: true, data: { name: 'Audi', color: 'red' } });
  };

  const openBMW = () => {
    setModal({ show: true, data: { name: 'BMW', color: 'blue' } });
  };

  const handleClose = () => {
    setModal({ show: false, data: null });
  };

  return (
    <div className="main">
      <button className="solidText" onClick={openAudi}>
        Button Audi
      </button>
      <button className="solidText" onClick={openBMW}>
        Button BMW
      </button>
      {modal.show && modal.data && <Modal closeModal={handleClose} data={modal.data} />}
    </div>
  );
}

I found this solution, not sure if it's the best but it work.

const [modal, setModal] = useState({ show: false, requestedModalId: 0});

const handleOpenModal = (id) => {
    setModal({ show: true, requestedModalId: id });
};

const handleCloseModal = () => {
    setModal({ show: false });
};

return {
    <div className="main">
        <button onClick={() => handleOpenModal(1)}>Button 1</button>
        <button onClick={() => handleOpenModal(2)}>Button 2</button>
        {modal.show && modal.requestedModalId === 1 && <Modal closeModal={handleCloseModal}>
           <div>Modal Child 1</div>
        </Modal>}
        {modal.show && modal.requestedModalId === 2 && <Modal closeModal={handleCloseModal}>
           <div>Modal Child 2</div>
        </Modal>}
    </div>
}

function Modal(props) {
    return (
        <div className="modal-container">
            <div className="modal">
                <button className="btn btn--close" onClick={() => props.closeModal()}>X</button>
                {props.children}
            </div>
        </div>
    )
}

本文标签： javascriptHow to make a dynamic modal in ReactStack Overflow