CODEWITHSUNDEEP
javascriptreactjsbootstrap-4bootstrap-modalreact-bootstrap
Hasan
Hasan

Reputation: 397

How to fire a function that closes a Bootstrap modal using React? (I'm not using jQuery)

I'm working on a React project, and for some reason I chose to use bootstrap package and not react-bootstrap package, and now I'm facing this problem:

In a Bootstrap modal, there is Link tag (a component from react-router-dom package) which behave like an 'a' tag but without reloading the page. So now when I click on this link, it will do it's job but unfortunately the modal will stay shown.

<Link to="/home">Home</Link>

I tried to add data-dismiss="modal" property to it and it actually worked - it will close the modal after clicking on the link but it will not do it's real job, which is changing the URL...

<Link to="/home" data-dismiss="modal">Home</Link>

I also tried these two options and they generated the same behavior:

this:

<Link to="Home">
  Home
  <a data-dismiss="modal"></a>
</Link>

and this:

<a data-dismiss="modal">
  <Link to="/home">Home</Link>
</a>

I found solutions using jQuery but It's not really a good idea to use jQuery in my code just for this problem, especially because I'm using React. I'm also avoiding the reality that I should use the react-bootstrap package instead for now, because I will have to change a lot of code in my project.

Upvotes: 0

Views: 189

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

The following screen shots are from actual code of Bootstrap. Particularly modal.js

enter image description here

enter image description here

You can refer here if you ought to see it from yourself: https://github.com/twbs/bootstrap/blob/b083c9639fd9012e5cba57d6c4088d43b3c3e57d/js/src/modal.js

So the point here is, your project is probably using jQuery because of the fact that

I tried to add data-dismiss="modal" property to it and it actually worked

So just go ahead and utilize jQuery if you really must continue using the original Bootstrap. The next possible solution is for you to write your own script to close the modal.

Bootstrap relies on these elements for the modal:

The backdrop

<div class="modal-backdrop fade show"></div>

and the modal element

<div class="modal fade show" id="exampleModalLive" tabindex="-1" aria-labelledby="exampleModalLiveLabel" style="display: block; padding-right: 17px;" aria-modal="true" role="dialog">

You are going to have to find a way to (1) remove the show class on the modal element and alter its CSS display property, (2) remove the modal-backdrop element on close. Both of which you are probably going to have to mutate in the DOM directly unless you ought to convert the implementation to React-based components - which react-bootstrap or reactstrap already did.

Upvotes: 1

Related Questions