title: How to display a modal dialog box in ReactJS?
body: <p>I'm new to JavaScript and ReactJS.</p>
  
  <p>I have an application, in which the user enters his or her e-mail address. Then
  I try to create the user record. If something goes wrong, I want to display a 
  modal window with the error message.</p>
  
  <pre><code>handleSubmit(evt) {
    evt.preventDefault()
    var email = this.state.email
    var userCreationResult = this.createUser(email)
    if (!userCreationResult.success) {
      // The modal window should be displayed here
      return
    }
  }
  </code></pre>
  
  <p><a href="https://react-bootstrap.github.io/components.html#modals-static" rel="nofollow noreferrer">react-bootstrap</a>
  has a component for modal windows. I created a class based on it:</p>
  
  <pre><code>import React, { Component, Modal } from 'react';
  
  class ModalMessageBox extends Component {
    constructor() {
      super()
    }
    render() {
      return (
        &lt;div&gt;
          &lt;Modal&gt;
            &lt;Modal.Header closeButton&gt;
              &lt;Modal.Title&gt;Modal heading&lt;/Modal.Title&gt;
            &lt;/Modal.Header&gt;
            &lt;Modal.Body&gt;
              &lt;h4&gt;An error occured&lt;/h4&gt;
              &lt;p&gt;Test error message.&lt;/p&gt;
            &lt;/Modal.Body&gt;
          &lt;/Modal&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default ModalMessageBox;
  </code></pre>
  
  <p>When the user creation error occurs, I try to display it using this code:</p>
  
  <pre><code>handleSubmit(evt) {
    evt.preventDefault()
    var email = this.state.email
    var userCreationResult = this.createUser(email)
    if (!userCreationResult.success) {
      var dialog = new ModalMessageBox();
      ReactDOM.render(dialog, document.getElementById('root'));
  </code></pre>
  
  <p>This doesn't work -- I get the error <code>ReactDOM.render(): Invalid component element.</code>.</p>
  
  <p><img src="https://i.imgur.com/thxjhm0.png" alt="ReactDOM.render(): Invalid component element."></p>
  
  <p>What is the right way to display a modal dialog in React?</p>
  
  <p><strong>Update 1 (27.07.2017 15:27 MSK):</strong></p>
  
  <p>Class, which contains the submit handler.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { 
    FormGroup, 
    ControlLabel, 
    FormControl, 
    HelpBlock, 
    Button,
    Modal,
    Popover,
    Tooltip,
    OverlayTrigger
  } from 'react-bootstrap';
  import style from './style';
  import FallibleOperationResult from './FallibleOperationResult';
  import ModalMessageBox from './ModalMessageBox';
  import ReactDOM from 'react-dom';
  
  class SignUpForm extends Component {
    constructor(props) {
      super(props)
      this.state = {email: ''};
      this.handleEmailChange = this.handleEmailChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleEmailChange(evt) {
      this.setState({ email: evt.target.value });
    }
    handleSubmit(evt) {
      evt.preventDefault()
      var email = this.state.email
      var userCreationResult = this.createUser(email)
      if (!userCreationResult.success) {
        displayUserCreationError(userCreationResult)
        console.log("Error detected")
        return
      }
  
      console.log("Submit button pressed, e-mail: " + this.state.email)
    }
    displayUserCreationError(userCreationResult) {
      // Display of the moal dialog should be implemented here
      // var dialog = new ModalMessageBox();
      // ReactDOM.render(dialog, document.getElementById('root'));
      console.log("User cannot be created ('" + userCreationResult + "'");
  
      return;
    }
    createUser(email) {
      return new FallibleOperationResult(
        false, 
        'User ' + email + ' cannot be created', 
        undefined
      );
    }
    render() {
      return (
        &lt;div style={style.signUpForm}&gt;
          &lt;form onSubmit={ this.handleSubmit }&gt;
            &lt;FormGroup
              controlId="formBasicText"
            &gt;
            &lt;FormGroup&gt;
              &lt;ControlLabel&gt;Email address&lt;/ControlLabel&gt;
              &lt;FormControl 
                type="email" 
                placeholder="Enter email"
                onChange={ this.handleEmailChange }
              /&gt;
            &lt;/FormGroup&gt;
            &lt;Button type="submit"&gt;Sign Up&lt;/Button&gt;
            &lt;p&gt;Your password will be sent to your e-mail address.&lt;/p&gt;
            &lt;/FormGroup&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default SignUpForm;
  </code></pre>