How to open bootstrap modal in react component?

Question

Have a react component. Need to open bootstrap modal on page load. Tried using jQuery and simple javascript but with no success.

React Component:

import React, { Component } from 'react'
import $ from 'jquery'

class Login extends Component {
  componentDidMount() {
    // here I want to open modal
  }

  render() {
    return (
      <div className="modal fade WelcomeModal" id="WelcomeModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div className="modal-dialog modal-dialog-centered" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <div className="camera-box">
                <img alt="" src="/img/yellow-logo.svg"/>
                <h5 className="modal-title" id="exampleModalLabel">Welcome to the Cozy App!</h5>
              </div>                             
            </div>
            <div className="modal-body">
              <p className="text-center">On the following screens weʼll ask you to register the Cozys in your home & adjust your temperature settings. Youʼll need the following information:</p>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

You don't need jquery. You can display the modal using properties in the state. — jagzviruz, Oct 11 '18 at 06:05
use this https://react-bootstrap.github.io/components/modal/ — Just code, Oct 11 '18 at 06:07
Check this https://stackoverflow.com/questions/28241912/bootstrap-modal-in-react-js — Hemadri Dasari, Oct 11 '18 at 06:50
Possible duplicate of [Bootstrap modal in React.js](https://stackoverflow.com/questions/28241912/bootstrap-modal-in-react-js) — Hemadri Dasari, Oct 11 '18 at 06:50

score 3 · Answer 1 · answered Oct 11 '18 at 09:32

3

Have a look at this codepen which shows how you can combine Bootstrap Classes with React without needing jQuery

toggleModal = () => this.setState({
              showLogin: !this.state.showLogin
          })

answered Oct 11 '18 at 09:32

jagzviruz

1,453
12
27

This is nice, but if you click on the modal itself it will dimiss – Brian Ogden Jan 03 '20 at 18:44

Ali Eslamifard · Answer 2 · 2022-08-20T13:57:56.153

2

first of all, DO NOT USE JQUERY IN REACT. you just need to set an state for show or hide modal. that's it.

// In functional components:
<div onClick={setState(true)}
// In class components:
<div onClick={this.setState({showModal: true})}

edited Aug 20 '22 at 13:57

answered Oct 11 '18 at 09:45

Ali Eslamifard

565
3
11

Where to use that state var so that modal can toggle ? – SubrataG Nov 08 '22 at 14:07

Roy · Answer 3 · 2018-10-11T06:58:32.553

0

You don't need Jquery for this purpose, all you need to do is to play with bootstrap css classes, which in turn show or hide the modal.

You can see an example in the below link

Link

edited Oct 11 '18 at 06:58

answered Oct 11 '18 at 06:51

Roy

471
5
15

1

This does not provide the full bootstrap modal functionality. Bootstrap modals rely heavily on additional javascript, implementing focus trap, body scroll lock and backdrop rendering, to name just a few. – zephi Feb 10 '20 at 14:19
@zephi : if you need all the animations and other functionality do refer reactstrap [https://reactstrap.github.io/components/modals/] this provides most of the bootstrap components as react components. – Roy Feb 12 '20 at 04:58
1

I'm just pointing out that bootstrap modals aren't a css-only solution. Your claim that all you need to do is play with css classes may therefore be misleading. – zephi Feb 12 '20 at 12:09

score 0 · Answer 4 · answered May 14 '20 at 11:28

0

Include the Js cdn in your public folder index.html https://getbootstrap.com/docs/4.0/getting-started/introduction/

Then call the bootstrap modal as regular, https://getbootstrap.com/docs/4.0/components/modal/

answered May 14 '20 at 11:28

user3252854

1
2

2

Providing it in code format would've been better, But anyway good work keep it up. – Khalid Khan May 14 '20 at 11:43

How to open bootstrap modal in react component?

4 Answers4