React-bootstrap modal not popping up even after showModal is set to true

Question

I have used this in previous projects and it worked just fine. I thought that maybe the state of showModal wasn't getting set, but it is getting set to true when I click the pictures. I will post code below.

Please let me know if you need anymore information rather than spamming the down-vote, help create a better community :)

import React, { Component } from 'react';
import { Modal } from 'react-bootstrap';

class Gallery extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showModal: false
    };
  }

  render() {
    console.log(this.state);
    const { gallery } = this.props;
    return (
      <section id="gallery" className="three">
        <div className="container">
          <header>
            <h2>{gallery ? gallery.title : 'Select A Gallery'}</h2>
          </header>
          <div className="card-deck">
            {gallery
              ? gallery.images.map((image, i) => (
                  <div key={i} className="card">
                    <img
                      onClick={() => {
                        this.setState({ showModal: true });
                      }}
                      className="card-img"
                      src={`${image}=s1000-c`}
                      alt="Card image cap"
                    />
                  </div>
                ))
              : null}
          </div>
          <Modal
            bsSize="sm"
            show={this.state.showModal}
            onHide={() => this.setState({ showModal: false })}
          >
            <Modal.Header closeButton>
              <Modal.Title>Purchase Item</Modal.Title>
            </Modal.Header>
            <Modal.Body>Hello</Modal.Body>
          </Modal>
        </div>
      </section>
    );
  }
}

export default Gallery;

EDIT: modal is showing up upon inspect here are two pictures to show:

---

Answer 1

Your code seems ok (see below how it runs just fine).
The only thing i can think of is that you forgot to include the bootstrap css file in your page.
You see, react-bootstrap is not injecting the actual css, its just generating components with css class names.

const {Modal} = ReactBootstrap;
const gry = {
  images: [
    'http://via.placeholder.com/350x150',
    'http://via.placeholder.com/350x150',
    'http://via.placeholder.com/350x150',
  ]
};


class Gallery extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showModal: false
    };
  }

  btnClick = () => {
    this.setState({ name: 'Sarah' });
  }

  render() {
    console.log(this.state);
    const { gallery } = this.props;
    return (
      <section id="gallery" className="three">
        <div className="container">
          <header>
            <h2>{gallery ? gallery.title : 'Select A Gallery'}</h2>
          </header>
          <div className="card-deck">
            {gallery
              ? gallery.images.map((image, i) => (
                <div key={i} className="card">
                  <img
                    onClick={() => {
                      this.setState({ showModal: true });
                    }}
                    className="card-img"
                    src={`${image}`}
                    alt="Card image cap"
                  />
                </div>
              ))
              : null}
          </div>
          <Modal
            bsSize="sm"
            show={this.state.showModal}
            onHide={() => this.setState({ showModal: false })}
          >
            <Modal.Header closeButton>
              <Modal.Title>Purchase Item</Modal.Title>
            </Modal.Header>
            <Modal.Body>Hello</Modal.Body>
          </Modal>
        </div>
      </section>
    );
  }
}

ReactDOM.render(<Gallery gallery={gry} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.5/react-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<div id="root"></div>

Edit
As a followup to your updated question, according to your screenshot, as far as react-bootstrap or react everything is looking fine. you would need to inspect your markup and styling to see what is hiding it.

Try to compare it with my example (inspect the .modal-backdrop .fade .in):