My issue is that when I map the data into the Modal, it is only returning the last item in the array. It looks like it is actually opening a modal for every object in the array and stays open on the last object.
I am also using React-Bootstrap-Table-Next in the same component. The button that I want to trigger the Modal with is currently in a column on the table. I would appreciate some input as I feel like I have hit a wall.
Button being rendered in the table with onClick handler to open the 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%" };} },
];
Modal state handling:
const [showModal, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
Modal code with map function:
<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>
Getting and setting the data:
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)
}
};
I'm not entirely sure what you are trying to do. If you click in a button to show a modal with the information of just one business, you wouldn't need to use map. You just pass the object you need into the Modal and use that:
...
<Modal.Body>
<div>Business Name: {business.BusinessName}</div>
<div>Business Email: {business.Email}</div>
</Modal.Body>
...
business would be one record filtered from all records (eg: by email), something like:
const business = submitted.find(({email}) => email === 'some.email@example.com')
But, if you want to have a list of submitted businesses showing in a modal, you need to only include the repeatable elements in the map.
In this case we have a modal with its different parts (Header, Footer, Body, etc) which should be an individual object being rendered. You then need to map the contents of your submitted list and output what you need.
Something like:
<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>