Example of showing/hiding Twitter Bootstrap (4) modal - with react, not jquery

App.js

import React, { Component } from 'react'

import Modal from './Modal'

export default class extends Component {
  constructor(props) {
    super(props)

    this.state = {
      isOpen: false
    }

    this.handleClose = this.handleClose.bind(this)
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    this.setState({
      isOpen: true
    })
  }
  handleClose() {
    this.setState({
      isOpen: false
    })
  }
  render() {
    return (
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur labore modi molestias quam veritatis voluptatum? Blanditiis eveniet expedita ipsam iusto maxime minima omnis qui ut. Dolorum ea molestiae officia suscipit!
        <button onClick={this.handleClick}>Show</button>
        <Modal id="myModal" isOpen={this.state.isOpen} onClose={this.handleClose} />
      </div>
    )
  }
}

Modal.js

import React, { Component, PropTypes } from 'react'
import classnames from 'classnames'

export default class Modal extends Component {
  render() {
    const {isOpen, id, onClose} = this.props;
    const isHidden = isOpen ? 'false' : 'true'
    const modalClassName = classnames('modal', 'fade', {show: isOpen})
    const modalStyle = {
      display: isOpen ? 'block' : 'none'
    }

    return (
      <div>
        <div className={modalClassName} id={id} tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden={isHidden} style={modalStyle}>
          <div className="modal-dialog" role="document">
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" className="close" data-dismiss="modal" aria-label="Close" onClick={onClose}>
                  <span aria-hidden={isHidden}>&times;</span>
                </button>
              </div>
              <div className="modal-body">
              </div>
              <div className="modal-footer">
                <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" className="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>
        {isOpen && <div className="modal-backdrop fade show"></div>}
      </div>
    )
  }
}

Modal.propTypes = {
  id: PropTypes.string,
  onClose: PropTypes.func,
  isOpen: PropTypes.bool
}