Render Modal Content based on specific content in React

Question

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

Answer 1

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

Answer 2

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.