How to use the react-bootstrap.Modal function in react-bootstrap

/**
 * @jsx React.DOM
 */

var React = require('react');
var $ = require('jquery');
var numeral = require('numeral');
var Router = require('react-router');
var Moment = require('moment');
var Mt = window.Mousetrap;
var _ = require('lodash');
require('../libs/bootstrap-datepicker');
var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
var ReactBootStrap = require('react-bootstrap');
var Modal = ReactBootStrap.Modal;
var ModalTrigger = ReactBootStrap.ModalTrigger;
var ButtonToolbar = ReactBootStrap.ButtonToolbar;
var Button = ReactBootStrap.Button;
var Link = Router.Link;

/* Components */
var LogEditor = require('../components/editor/LogEditor');
var SearchBox = require('../components/SearchBox');
var Notify = require('../components/Notify');
var Progress = require('../components/Progress');
var DataAPI = require('../utils/DataAPI');
var BindStore = require('../mixins/BindStore');
var LogClassPie = require('../components/LogClassPie');
var OneDayGoal =  require('../components/OneDayGoal');
var IScroll = require('../libs/iscroll');
var Swiper = require('../components/Swiper');

var React = require('react');
var Fluxxor = require("fluxxor");
var FluxMixin = Fluxxor.FluxMixin(React);
var ReactBootstrap = require('react-bootstrap');
var Button = ReactBootstrap.Button;
var Modal = ReactBootstrap.Modal;

var ConfirmModal = React.createClass({

  getInitialState: function () {
    return {
      isModalOpen: false,
      confirmText: 'Okay',
      cancelText: 'Cancel',
      confirmCallback: function() { console.log('okay')},
      cancelCallback: function() { console.log('okay')}
    };
  },

  handleToggle: function() {
    this.setState({
      isModalOpen: !this.state.isModalOpen

var React              = require('react'),
    BS                 = require('react-bootstrap'),
    Input              = BS.Input,
    Button             = BS.Button,
    Modal              = BS.Modal,
    Panel              = BS.Panel,
    Auth               = require('../../../../src/j-toker.js'),
    ResponseModalMixin = require('../mixins/response-modal.jsx'),
    Highlight          = require('react-highlight'),
    _                  = require('lodash');

module.exports = React.createClass({
  mixins: [ResponseModalMixin],

  propTypes: function() {
    return {
      signedIn: React.PropTypes.bool,
      config: React.PropTypes.string
    }
  },

import { createElement, createFactory } from 'react';
import * as D from 'react-dom-factories';
import * as ReactBootstrap from 'react-bootstrap';
import * as classNames from 'classnames';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import * as maybe from 'data.maybe';
import * as _ from 'lodash';

import { Component } from 'platform/api/components';
import {SparqlClient} from 'platform/api/sparql';

import TemplateItem from 'platform/components/ui/template/TemplateItem';
import { Spinner } from 'platform/components/ui/spinner';


const Modal = createFactory(ReactBootstrap.Modal);
const ModalHeader = createFactory(ReactBootstrap.Modal.Header);
const ModalTitle = createFactory(ReactBootstrap.Modal.Title);
const ModalBody = createFactory(ReactBootstrap.Modal.Body);

import '../scss/object-representations-widget.scss';


interface ObjectRepsWidgetProps {
  /**
   * should return 'label', 'imgURL', 'isMainRep' values
   * where 'label' is the entity label, not the image label
   */
  query: string
  /**
   * can be used to format the thumbnail images which display below the large featured image
   */

var ReactBootstrap = require('react-bootstrap')
  , Button = ReactBootstrap.Button
  , ButtonGroup = ReactBootstrap.ButtonGroup
  , Glyphicon = ReactBootstrap.Glyphicon
  , Modal = ReactBootstrap.Modal
  , Input = ReactBootstrap.Input

var React = require('react');

var SafeStateChangeMixin = require('../common/SafeStateChangeMixin.js');
var SetIntervalMixin = require("../common/SetIntervalMixin.js");

module.exports = GenerateAccountModalButton = React.createClass({
  mixins: [SafeStateChangeMixin],
  getInitialState: function () {
    return {
      isModalOpen: false,
      username: "",
      checkedUsername: "",
      available: false,
    };

var ReactBootstrap = require('react-bootstrap')
  , Button = ReactBootstrap.Button
  , ButtonGroup = ReactBootstrap.ButtonGroup
  , Glyphicon = ReactBootstrap.Glyphicon
  , Modal = ReactBootstrap.Modal
  , Input = ReactBootstrap.Input
  , ListGroupItem = ReactBootstrap.ListGroupItem

var React = require('react');

var SafeStateChangeMixin = require('../common/SafeStateChangeMixin.js');
var SetIntervalMixin = require("../common/SetIntervalMixin.js");
var PostComposer = require("../common/PostComposer.js");

module.exports = NewPostModalButton = React.createClass({
  getInitialState: function () {
    return {
      isModalOpen: false
    };
  },
  handleToggle: function () {

/*jshint esversion: 6 */

const _ = require('underscore');
import {
  Button,
  Glyphicon,
  Form,
  FormGroup,
  FormControl,
  ControlLabel,
  HelpBlock,
  Col,
  Checkbox
} from 'react-bootstrap';
var Modal = require('react-bootstrap').Modal;
const React = require('react');

import {PropTypes} from 'react';
import Actions from '../../../../../actions';

var journeyStyle = {
  color:'black',
  width:'100%',
  textAlign: 'center'
}
var highlightStyle = {
    color: "#00789b",
    borderColor: "#00789b",
    boxShadow: "0 0 10px #00789b",
    cursor:'pointer'
}

var ReactBootstrap = require('react-bootstrap');
var Grid = ReactBootstrap.Grid;
var Row = ReactBootstrap.Row;
var Col = ReactBootstrap.Col;
var Form = ReactBootstrap.Form;
var FormGroup = ReactBootstrap.FormGroup;
var FormControl = ReactBootstrap.FormControl;
var ControlLabel = ReactBootstrap.ControlLabel;
var Button = ReactBootstrap.Button;
var ButtonGroup = ReactBootstrap.ButtonGroup;
var ButtonToolbar = ReactBootstrap.ButtonToolbar;
var Glyphicon = ReactBootstrap.Glyphicon;
var ListGroup = ReactBootstrap.ListGroup;
var ListGroupItem = ReactBootstrap.ListGroupItem;
var Modal = ReactBootstrap.Modal;
var Panel = ReactBootstrap.Panel;

var Combobox = require('react-widgets').Combobox;

var models = require('../models');
var Security = models.Security;
var SecurityType = models.SecurityType;
var SecurityTypeList = models.SecurityTypeList;

class SecurityTemplatePanel extends React.Component {
	constructor() {
		super();
		this.onSearchChange = this.handleSearchChange.bind(this);
	}
	handleSearchChange() {
		this.props.onSearchTemplates(ReactDOM.findDOMNode(this.refs.search).value, 0, this.props.maxResults + 1);

'use strict';

const React          = require('react');
const PropTypes      = require('prop-types');
const ReactBootstrap = require('react-bootstrap');
const Modal          = ReactBootstrap.Modal;


const AboutModal = (props) => {
    return (
        
            
                About Sylk
            
            
                <p>Sylk is the WebRTC client companion for <a rel="noopener noreferrer" href="http://sylkserver.com">SylkServer</a> </p>
                <br>
                <p>Copyright © <a rel="noopener noreferrer" href="http://ag-projects.com">AG Projects</a></p>
            
        
    );
}

var React = require('react');
var Fluxxor = require("fluxxor");
var FluxMixin = Fluxxor.FluxMixin(React);
var StoreWatchMixin = Fluxxor.StoreWatchMixin;
var ReactBootstrap = require('react-bootstrap');
var Button = ReactBootstrap.Button;
var Modal = ReactBootstrap.Modal;
var ModalTrigger = ReactBootstrap.ModalTrigger;

var SendRepModal = React.createClass({
  mixins: [FluxMixin, StoreWatchMixin('asset')],

  getInitialState: function () {
    return {
      amount: '',
      destination: ''
    };
  },

  getStateFromFlux: function () {
    var flux = this.getFlux();

    return {