How to show a modal dialog in React using bootstrap

Question

Im using react-16 in a project created using create-react-app and the vanilla bootstrap 4 library that provides styling (no components).

Can someone point me towards a working example where pressing a button I can open a modal dialog styled with bootstrap?

Thanks in advance.

maybe this helps : https://react-bootstrap.github.io/components/modal/ — Taki, Jun 02 '18 at 21:59
Is there any particular reason you using bootstrap 4 and not use React-bootstrap when it’s so useful to use with React ? — Johnson Samuel, Jun 03 '18 at 02:59

score -1 · Answer 1 · answered Jun 03 '18 at 01:03

I have a codepen on progress that uses bootstrap although I didn't style my modal with bootstrap ... I'm actually using it in the rest of the project here it is: https://codepen.io/manAbl/pen/eKYVpL?editors=1010

I'm creating the instance of the modal with my: <div id="modal-root"></div>

Them I'm creating a portal that stays connected with the hole react state tree with my class Modal like-so:

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
     modalRoot.removeChild(this.el);
  }

  render() {
     return ReactDOM.createPortal(
       this.props.children,
       this.el,
    );
  }
}

and rendering the modal based on state:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false, 
      };
     this.handleModalVisibility = this.handleModalVisibility.bind(this);
  }

  handleModalVisibility() {
    this.setState({ showModal: !this.state.showModal });
  }
  render() {
    const { showModal } = this.state;

    return (
      <div className="container app-wrapper">
        <ListContainer/>
        <Button onClick={this.handleModalVisibility} title='Add Recipe' />
          { this.state.showModal ? (
          <Modal>
            <InputAddRecipe onClick={this.handleModalVisibility} />
          </Modal> ) : null }
      </div>
    )
  }
}

Hope helps :)

How to show a modal dialog in React using bootstrap

1 Answers1