React Bootstrap: mapping data inside model doesnt show dynamic data in modal

I have a react bootstrap modal where I am mapping my data but the problem is when I click on modals, all the modals display same data, its apparently the last item of the array in all modals. I want to generate modal dynamically and show different data for different modal. Here is some relevant piece of code:


  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
          {availableTeacher ? (
            availableTeacher.teachers.length > 0 ? (
              availableTeacher.teachers.map((data, i) => ( 
                      <Button variant="primary" onClick={handleShow}>
                       Test Modal
                      </Button>

                      <Modal show={show} onHide={handleClose}>
                        <Modal.Header closeButton>
                          <Modal.Title>{data.teacher.name}</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>{data.teacher.name}</Modal.Body>
                        <Modal.Footer>
                          <Button variant="secondary" onClick={handleClose}>
                            Close
                          </Button>
                          <Button variant="primary" onClick={handleClose}>
                            Save Changes
                          </Button>
                        </Modal.Footer>
                      </Modal>
    ```

25 thoughts on “React Bootstrap: mapping data inside model doesnt show dynamic data in modal”

Leave a Comment