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.
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.
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.