Looking for a way to display different text in a Modal based off of which button is pressed-CodePudding

I'm working on this little React project, and I have 4 buttons that have different titles for provided services. I also have a Modal that appears to give more information. I am using state to display and remove the Modal component which works fine. So I am looking for a way to pass different titles, and different sets of descriptions as props to the Modal depending on which button was pressed. I.E, if Button 4 was pressed, it would display the title and description text for Service 4.

Here is the current code I have

const ServicesCard: React.FC = () => {
  const [modal, setModal] = useState(false);
  const Toggle = () => setModal(!modal);

  return (
    <div className={classes.ServicesCard}>
      <div className={classes.ServicesCardContainer}>
        <div className={classes.TitleContainer}>
          <h2>Services</h2>
          <hr />
        </div>
        <div className={classes.ButtonContainer}>
          <button onClick={() => Toggle()} id="s1">
            Service 1
          </button>
          <button onClick={() => Toggle()} id="s2">
            Service 2
          </button>
          <button onClick={() => Toggle()} id="s3">
            Service 3
          </button>
          <button onClick={() => Toggle()} id="s4">
            Service 4
          </button>

          <ServiceModal show={modal} close={Toggle} title="Service">
            
          </ServiceModal>
        </div>
        <p>Click For More Info</p>
      </div>
    </div>
  );
};

Any help would be greatly appreciated.

CodePudding user response：

Your course of action should be passing props of whatever you want to display in the modal to the ServiceModal component.

I would suggest that instead of having a modal state, have a selectedService state which starts as null. Then, when clicking a button, change the selectedService state to whatever you chose and display the modal only when selectedService is not null

It would look something along these lines


const SERVICES_INFO = {
s1: {title: 'whatever', description: 'whatever'},
s2: //You get the gist
...
}


const ServicesCard: React.FC = () => {
  const [selectedService, setSelectedService] = useState(false);
  const selectService = service => setSelectedService(service);
  const closeModal = () => setSelectedService(null);

  return (
    <div className={classes.ServicesCard}>
      <div className={classes.ServicesCardContainer}>
        <div className={classes.TitleContainer}>
          <h2>Services</h2>
          <hr />
        </div>
        <div className={classes.ButtonContainer}>
          <button onClick={() => selectService("s1")} id="s1">
            Service 1
          </button>
          <button onClick={() => selectService("s2")} id="s2">
            Service 2
          </button>
          <button onClick={() => selectService("s3")} id="s3">
            Service 3
          </button>
          <button onClick={() => selectService("s4")} id="s4">
            Service 4
          </button>

          <ServiceModal show={selectedService !== null} close={closeModal} serviceInfo={SERVICES_INFO[selectedService]}>
            
          </ServiceModal>
        </div>
        <p>Click For More Info</p>
      </div>
    </div>
  );
};

And then in your ServiceModal component you can use the serviceInfo prop to render whatever you need.

CodePudding user response：

I do not work in React Js. But I am telling you the Javascript. Do this:

Give IDs to your Modal Title and Text like modalTitle and modalText.

Now, change the innerText of your title and text when a specific button is clicked

modalTitle = documet.getElementById('modalTitle');
modalText = documet.getElementById('modalText');

//if button 1 is clicked

s1.addEventListner('click', ()=>{
    modalTitle.innerText = 'Your Button s1 Title';
    modalText.innerText = 'Your Button s1 Text';
})

//if button 2 is clicked

s2.addEventListner('click', ()=>{
    modalTitle.innerText = 'Your Button s2 Title';
    modalText.innerText = 'Your Button s2 Text';
})

Do this for all buttons.