Mi problema es que cuando mapeo los datos en Modal, devuelve todos los elementos de ese campo en la matriz, por ejemplo, el mapeo de Business Name devolverá todos los nombres comerciales en la matriz en lugar de 1.

También estoy usando React-Bootstrap-Table-Next en el mismo componente para representar datos. Se agrega un botón a cada fila de la tabla en el que me gustaría hacer clic y mostrar más información sobre esa fila en particular.

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:

 <Modal show={showModal} onHide={handleClose} size="lg" centered > <Modal.Header closeButton> {submitted.map((item) => <Modal.Title key={item.Id}> {item.BusinessName}</Modal.Title> )} </Modal.Header> <Modal.Body></Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={handleClose}> Close </Button> <Button variant="primary" onClick={handleClose}> Save Changes </Button> </Modal.Footer> </Modal>

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) } };