title: Bootstrap modal in React.js
body: <p>I need to open a Bootstrap Modal from clicking on a button in a Bootstrap navbar and other places (<strong>to show data for a component instance, ie. providing "editing" functionality</strong>), but I don't know how to accomplish this. Here is my code:</p>
  
  <p><strong>EDIT: Code updated.</strong></p>
  
  <pre><code>ApplicationContainer = React.createClass({
      render: function() {
          return (
              &lt;div className="container-fluid"&gt;
              &lt;NavBar /&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="col-md-2"&gt;
                          &lt;ScheduleEntryList /&gt;
                      &lt;/div&gt;
                      &lt;div className="col-md-10"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;ScheduleEntryModal /&gt;
              &lt;/div&gt;
          );
      }
  });
  
  NavBar = React.createClass({
      render: function() {
          return (
              &lt;nav className="navbar navbar-default navbar-fixed-top"&gt;
                  &lt;div className="container-fluid"&gt;
                      &lt;div className="navbar-header"&gt;
                          &lt;a className="navbar-brand" href="#"&gt;
                              &lt;span className="glyphicon glyphicon-eye-open"&gt;&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                      &lt;form className="navbar-form navbar-left"&gt;
                          &lt;button className="btn btn-primary" type="button" data-toggle="modal" data-target="#scheduleentry-modal"&gt;
                              &lt;span className="glyphicon glyphicon-plus"&gt;
                              &lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/form&gt;
                      &lt;ul className="nav navbar-nav navbar-right"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;&lt;span className="glyphicon glyphicon-user"&gt;&lt;/span&gt; Username&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          );
      }
  });
  
  ScheduleEntryList = React.createClass({
      getInitialState: function() {
          return {data: []}
      },
  
      loadData: function() {
          $.ajax({
              url: "/api/tasks",
              dataType: "json",
  
              success: function(data) {
                  this.setState({data: data});
              }.bind(this),
  
              error: function(xhr, status, error) {
                  console.error("/api/tasks", status, error.toString());
              }.bind(this)
          });
      },
  
      componentWillMount: function() {
          this.loadData();
          setInterval(this.loadData, 20000);
      },
  
      render: function() {
          items = this.state.data.map(function(item) {
              return &lt;ScheduleEntryListItem item={item}&gt;&lt;/ScheduleEntryListItem&gt;;
          });
  
          return (
              &lt;div className="list-group"&gt;
                  &lt;a className="list-group-item active"&gt;
                      &lt;h5 className="list-group-item-heading"&gt;Upcoming&lt;/h5&gt;
                  &lt;/a&gt;
                  {items}
              &lt;/div&gt;
          );
      }
  });
  
  ScheduleEntryListItem = React.createClass({
      openModal: function() {
          $("#scheduleentry-modal").modal("show");
      },
  
      render: function() {
          deadline = moment(this.props.item.deadline).format("MMM Do YYYY, h:mm A");
  
          return (
              &lt;a className="list-group-item" href="#" onClick={this.openModal}&gt;
                  &lt;h5 className="list-group-item-heading"&gt;
                      {this.props.item.title}
                  &lt;/h5&gt;
                  &lt;small className="list-group-item-text"&gt;
                      {deadline}
                  &lt;/small&gt;
              &lt;/a&gt;
          );
      }
  });
  
  Modal = React.createClass({
      componentDidMount: function() {
          $(this.getDOMNode())
              .modal({backdrop: "static", keyboard: true, show: false});
      },
  
      componentWillUnmount: function() {
          $(this.getDOMNode())
              .off("hidden", this.handleHidden);
      },
  
      open: function() {
          $(this.getDOMNode()).modal("show");
      },
  
      close: function() {
          $(this.getDOMNode()).modal("hide");
      },
  
      render: function() {
          return (
              &lt;div id="scheduleentry-modal" className="modal fade" tabIndex="-1"&gt;
                  &lt;div className="modal-dialog"&gt;
                      &lt;div className="modal-content"&gt;
                          &lt;div className="modal-header"&gt;
                              &lt;button type="button" className="close" data-dismiss="modal"&gt;
                                  &lt;span&gt;&amp;times;&lt;/span&gt;
                              &lt;/button&gt;
                              &lt;h4 className="modal-title"&gt;{this.props.title}&lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div className="modal-body"&gt;
                              {this.props.children}
                          &lt;/div&gt;
                          &lt;div className="modal-footer"&gt;
                              &lt;button type="button" className="btn btn-danger pull-left" data-dismiss="modal"&gt;Delete&lt;/button&gt;
                              &lt;button type="button" className="btn btn-primary"&gt;Save&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          )
      }
  });
  
  ScheduleEntryModal = React.createClass({
      render: function() {
          var modal = null;
          modal = (
              &lt;Modal title="Add Schedule Entry"&gt;
                      &lt;form className="form-horizontal"&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="title" className="col-sm-2 control-label"&gt;Title&lt;/label&gt;
                              &lt;div className="col-sm-10"&gt;
                                  &lt;input id="title" className="form-control" type="text" placeholder="Title" ref="title" name="title"/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="deadline" className="col-sm-2 control-label"&gt;Deadline&lt;/label&gt;
                              &lt;div className="col-sm-10"&gt;
                                  &lt;input id="deadline" className="form-control" type="datetime-local" ref="deadline" name="deadline"/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="completed" className="col-sm-2 control-label"&gt;Completed&lt;/label&gt;
                              &lt;div className="col-sm-10"&gt;
                                  &lt;input id="completed" className="form-control" type="checkbox" placeholder="completed" ref="completed" name="completed"/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;label htmlFor="description" className="col-sm-2 control-label"&gt;Description&lt;/label&gt;
                              &lt;div className="col-sm-10"&gt;
                                  &lt;textarea id="description" className="form-control" placeholder="Description" ref="description" name="description"/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
              &lt;/Modal&gt;
          );
  
          return (
              &lt;div className="scheduleentry-modal"&gt;
                  {modal}
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>Other comments and improvements to the code are appreciated.</p>