Boostrap 4: Modal won't show on my react app

Question

I am trying to add a modal to my app. I make it so that once my page is loaded, it will show( does not require button) for test purpose. I have "bootstrap": "^4.1.3" as my dependency.

On my CSS, i make it so that the display is block:

.modal{
  display: block
}

.modal-content{
  display: block
}

In my react app, I import it and use it as follow:

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

  render() {
    return (
      <div className="App">
        <div className="modal fade" id="myModal" role="dialog">
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <button type="button" className="close" data-dismiss="modal">&times;</button>
                <h4 className="modal-title">Modal Header</h4>
              </div>
              <div className="modal-body">
                <header className="App-header">
                  Code Authentication
                </header>

                <div className="row">
                  <div className="col-sm-6">
                      {this.getPhoneList()}
                  </div>
                  <div className="col-sm-6">
                      {this.getMethodList()}
                  </div>
                </div>

                <button type="button" className="btn btn-info" onClick={() => this.VerifyCode()}>
                  VERIFY CODE
                </button>
              </div>
              <div className="modal-footer">
              </div>
            </div>

          </div>
        </div>
      </div>
    );
  }

I copied the modal code from boostrap's document and modified a little bit so it works for my test purpose. I also tried many different code, but none of the modal worked.

What I have tried: I have read many of Posts related to this issues on Stack. Many of them were simply due to the fact that the OP did not include certain file or the attribute of display is not set to show. In my case, i am neither.

Any suggestions will be helpful

Answer 1

The modal is meant to be shown with a trigger which adds modal-open to the body and show to the modal. To make the modal show remove fade , and add the d-block class which will force the modal to display.

<div className="modal d-block" id="myModal" role="dialog">
          <div className="modal-dialog">
            <div className="modal-content">
...

https://www.codeply.com/go/r47k4BlDKA

Answer 2

I believe that your .fade class has the attribute opacity: 0; your CSS should be overriding this with opacity: 1;