modal.js

import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom'

const modalRoot = document.getElementById('modal-root')

export default class Modal extends Component {
  render() {
    const {isVisible} = this.props
    return ReactDOM.createPortal(
      <Fragment>
        <div className={isVisible ? `modal--container modal--show` : `modal--container`}>
            <div className='modal--background' onClick={this.props.onClose} />
            <div className='modal--content'>
              <div className='modal--header'>
                <h1 className='modal--title'>{this.props.title}</h1><button className='modal--close' onClick={this.props.onClose} ></button>
              </div>
              {this.props.children}
            </div>
        </div>
      </Fragment>,
      modalRoot
    )
  }
}

// use case
<Modal
  onClose={this.handleClosePlayerModal}
  isVisible={this.state.showPlayerModal}
  title={``}
>
  // content
</Modal>