Estoy mapeando una lista de diferentes socios de productos que tienen un enlace para saber más para mostrar un modal. Estoy tratando de averiguar cómo debo pasar accesorios al modal para que muestre la información correcta del compañero.
Aquí está mi código.
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¿Cómo debo hacer para asignar accesorios a este modal? Gracias
definir otro estado:
const [dataMore, setDataMore] = useState();Use atributos de datos en el botón. Luego pase los datos con el evento (e):
<Button className="button" onClick= {handleClick} data-more={Whateverdata}>Know More</Button>luego acceda a los datos después de hacer clic en leer más:
const handleClick = (e)=>{ console.log(e.target) setDataMore(()=> e.dataset.more) if(showModal) setModal(false); else setModal(true) }y finalmente usa ese estado en tu modal como contenido:
<Modal open = {showModal} onClose={handleClick}> <Box sx = {style}> {dataMore} </Box> </Modal>cada vez que elige otro elemento, el estado se actualiza, al igual que su modal.
solo hazlo así, toma otro estado
const [currentUser, setCurrentUser] = useState(null);luego, cuando haga clic en un registro específico para abrir modal, establezca este estado también haciendo clic como:
{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> ) })}y ahora tiene un registro específico para mostrar en el modal