CODEWITHSUNDEEP
reactjsbootstrap-modalbootstrap-5
Young Rishiraj
Young Rishiraj

Reputation: 43

Bootstrap modal not showing in React

When I click on the launch demo modal button the modal is not showing. I have already installed bootstrap in Node.js and import it in index.js. I don't know why isn't it working.

 import React, { useState, useEffect } from "react";
    import axios from "axios";
    function FetchLists() {
      const [data, setData] = useState([]);
      const fetch = async () => {
        try {
          const getData = await axios.get(
            "http://localhost:5000/cinephile/lists/fetch",
            {
              headers: {
                "auth-token": localStorage.getItem("auth-token"),
              },
            }
          );
    
          setData(getData.data);
        } catch (error) {
          console.log(error);
        }
      };
      useEffect(() => {
        fetch();
      }, [data]);
      return (
       <>
       
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
      Launch demo modal
    </button>
    
    
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    
       
      
       
       </>
            
          
         
        
    
          
        
      );
    }
    
    export default FetchLists;

When i click on the launch demo modal button the modal is not showing. I have already installed bootstrap in node js and import it in index.js. I dont know why isn't it working. Can someone please help me fix this

Upvotes: 2

Views: 64

Answers (3)

Thomas Dami
Thomas Dami

Reputation: 1

add a React state:

const [isOpen, setIsOpen] = useState(false);

add onClick function to the button:

 <button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="modal"
    data-bs-target="#exampleModal"
    **onClick={() => setIsOpen(true)}**
  >
    Launch demo modal
  </button>

and finally use conditional rendering to render the modal:

**{isOpen && (**
    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      ...
    </div>

if you also want to add the closing of the modal, add the onClick function to the Close button by setting the state to false:

 <div class="modal-footer">
     <button
      **onClick={() => setIsOpen(false)}**
      type="button"
      class="btn btn-secondary"
      data-bs-dismiss="modal"
     >
       Close
     </button>
            ...
  </div>

Upvotes: 0

Charles Owen
Charles Owen

Reputation: 2890

Look at the reactstrap Modal.

https://reactstrap.github.io/?path=/docs/components-modal--modal

Basic example:

 import React, { useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

function Example(args) {
  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        Click Me
      </Button>
      <Modal isOpen={modal} toggle={toggle} {...args}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>{' '}
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

export default Example;

Upvotes: 0

Shahnewaz Tameem
Shahnewaz Tameem

Reputation: 41

make sure you've imported both Bootstrap CSS and Bootstrap JS correctly in your index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

but as you are using react I would suggest you to use Modal from react-bootstrap. Here you can find the details of it: React bootstrap Modal

Upvotes: 0

Related Questions