I am mapping over a list of different product partners which have a know more link to display a modal. I am trying to figure out how should I pass in props to the modal so that it displays the correct partner's information.
Here's my code.
import React,{useEffect , useState} from 'react'
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal";
const json ; // this is some mockup api response , assume it has the properties referred to
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "background.paper",
border: "2px solid #000",
boxShadow: 24,
p: 4,
};
const Rewards = ()=>{
const [showModal, setModal] = useState(false);
const handleClick = (e)=>{
console.log(e.target)
if(showModal)
setModal(false);
else
setModal(true)
}
return (
<div>
<ul>
{json.reward_partners.map((d, index)=>{
return (
<li key = {index}>
<img src = {d.img} alt={d.name}/>
<h3>{d.name}</h3>
<p>{d.content}</p>
<Button className="button" onClick= {handleClick}>Know More</Button>
</li>
)
})}
<Modal open = {showModal} onClose={handleClick}>
<Box sx = {style}>
Text
</Box>
</Modal>
</ul>
</div>
)
}
export default Rewards
How should I go about mapping props to this modal? Thanks
define another state :
const [dataMore, setDataMore] = useState();
Use a data attributes on the Button.then pass the data with the event(e):
<Button className="button" onClick= {handleClick} data-more={Whateverdata}>Know More</Button>
then access the data after clicking on read more:
const handleClick = (e)=>{
console.log(e.target)
setDataMore(()=> e.dataset.more)
if(showModal)
setModal(false);
else
setModal(true)
}
and finally use that state in your modal as content:
<Modal open = {showModal} onClose={handleClick}>
<Box sx = {style}>
{dataMore}
</Box>
</Modal>
whenever you choose another item the state is updated, and so is your modal.
just do it like this, take another state
const [currentUser, setCurrentUser] = useState(null);
then when you click on a specific record to open modal, set this state also by onClick like:
{json.reward_partners.map((d, index)=>{
return (
<li key = {index}>
<img src = {d.img} alt={d.name}/>
<h3>{d.name}</h3>
<p>{d.content}</p>
<Button className="button" onClick= {() => {
setCurrentUser(d);
handleClick();
}}>Know More</Button>
</li>
)
})}
and now you have a specific record to show in the modal