So zeigen Sie ein modales Dialogfeld in ReactJS?

Ich bin neu in JavaScript und ReactJS.

Ich habe eine Anwendung, in dem der Benutzer seine oder Ihre e-mail-Adresse. Dann
Ich versuche zu erstellen, den Benutzer-Datensatz. Wenn etwas schief geht, möchte ich die Anzeige ein
modal-Fenster mit der Fehlermeldung.

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
  }
}

reagieren-bootstrap
hat eine Komponente für modale Fenster. Ich erstellte eine Klasse, die auf ihm basieren:

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

class ModalMessageBox extends Component {
  constructor() {
    super()
  }
  render() {
    return (
      <div>
        <Modal>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4>An error occured</h4>
            <p>Test error message.</p>
          </Modal.Body>
        </Modal>
      </div>
    )
  }
}

export default ModalMessageBox;

Wenn der Benutzer die Erstellung Fehler Auftritt, versuche ich zeigen Sie es mit diesem 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'));

Funktioniert das nicht -- ich bekomme die Fehlermeldung ReactDOM.render(): Invalid component element..

Was ist der richtige Weg, um die Anzeige eines modalen Dialoges in Reagieren?

Update 1 (27.07.2017 15:27 MSK):

Klasse, die enthält die submit-handler.

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 (
      <div style={style.signUpForm}>
        <form onSubmit={ this.handleSubmit }>
          <FormGroup
            controlId="formBasicText"
          >
          <FormGroup>
            <ControlLabel>Email address</ControlLabel>
            <FormControl 
              type="email" 
              placeholder="Enter email"
              onChange={ this.handleEmailChange }
            />
          </FormGroup>
          <Button type="submit">Sign Up</Button>
          <p>Your password will be sent to your e-mail address.</p>
          </FormGroup>
        </form>
      </div>
    )
  }
}

export default SignUpForm;