Mi problema es que cuando asigno los datos en Modal, solo devuelve el último elemento de la matriz. Parece que en realidad está abriendo un modal para cada objeto en la matriz y permanece abierto en el último objeto.
También estoy usando React-Bootstrap-Table-Next en el mismo componente. El botón con el que quiero activar el Modal se encuentra actualmente en una columna de la tabla. Agradecería algún aporte ya que siento que me he topado con una pared.
Botón que se representa en la tabla con el controlador onClick para abrir el modal:
const columns = [ { dataField: "View", text: "View", formatter: () => {return <Button variant="success" onClick={handleShow}>View</Button>}, headerStyle: () => {return { width: "5%" };} }, { dataField: "BusinessName", text: "Business Name", headerStyle: () => {return { width: "27%" };} }, ];Manejo de estado modal:
const [showModal, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true);Código modal con función de mapa:
<div> {submitted.map((submitted) => ( <Modal show={showModal} onHide={handleClose} size="lg" key={submitted.Id} centered > <Modal.Header closeButton> <Modal.Title>{submitted.BusinessName}</Modal.Title> </Modal.Header> <Modal.Body>{submitted.Email}</Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={handleClose}> Close </Button> <Button variant="primary" onClick={handleClose}> Save Changes </Button> </Modal.Footer> </Modal> ))} </div>Obtener y configurar los datos:
const [submitted, setSubmitted] = useState([]); const getSubmittedData = async () => { try { const response = await Axios.get(url); setSubmitted(response.data); console.log(response.data); setLoading(true); } catch (e) { console.log(e) } };No estoy completamente seguro de lo que estás tratando de hacer. Si hace clic en un botón para mostrar un modal con la información de un solo negocio, no necesitaría usar el map . Simplemente pasa el objeto que necesita al Modal y usa eso:
... <Modal.Body> <div>Business Name: {business.BusinessName}</div> <div>Business Email: {business.Email}</div> </Modal.Body> ... business sería un registro filtrado de todos los registros (por ejemplo: por correo electrónico), algo así como:
const business = submitted.find(({email}) => email === 'some.email@example.com') Pero, si desea tener una lista de empresas submitted que se muestren en un modal, solo debe incluir los elementos repetibles en el map .
En este caso, tenemos un modal con sus diferentes partes (Encabezado, Pie de página, Cuerpo, etc.) que debería ser un objeto individual que se representa. Luego debe map el contenido de su lista submitted y generar lo que necesita.
Algo como:
<div> <Modal show={showModal} onHide={handleClose} size="lg" centered> <Modal.Header closeButton> <Modal.Title>Businesses</Modal.Title> </Modal.Header> <Modal.Body> {submitted.map((submitted) => ( <div key={submitted.Id}> <div>Business Name: {submitted.BusinessName}</div> <div>Business Email: {submitted.Email}</div> </div> ))} </Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={handleClose}> Close </Button> <Button variant="primary" onClick={handleClose}> Save Changes </Button> </Modal.Footer> </Modal> </div>