title: React - How to Populate and Show a Modal, then Send AJAX Request on Submit
body: <p><strong>CodePen here (<em>minus delete ajax request</em>):</strong> <a href="http://codepen.io/martincarlin87/pen/KzPWOw" rel="nofollow">http://codepen.io/martincarlin87/pen/KzPWOw</a></p>
  
  <p>I have been trying to learn React for a couple of days and attempting to convert one page in my web app to use it rather than just jQuery and Vanilla JS.</p>
  
  <p>At the moment, there is an HTML table which displays rows from a database table with a column containing links to edit and delete a row. I eventually managed to get the delete working yesterday after receiving help on my previous question, so I am now trying to extend it and now allow editing.</p>
  
  <p>I have the <code>handleEditModel</code> working, but I'm not sure how to populate and show the modal from there, and secondly, how to then send the ajax request once the submit button in the modal footer is clicked.</p>
  
  <p>Using jQuery, I would do something like:</p>
  
  <pre><code>$(document).on('shown.bs.modal', '#edit_model_modal', function () { 
      $('#edit_model_form input[name="model[property_1]"]').focus();
  });
  
  $('#edit_blackhole_form input').keypress(function (e) {
      if (e.which == 13) {
          $('#edit_model').click();
      }
  });
  
  $(document).on('click', '.edit_model_link', function() {
      // get data and populate modal form, then show:
      $('#edit_model_modal').modal('show');
  });
  </code></pre>
  
  <p>and then another function which handled the submission and ajax request</p>
  
  <pre><code>$(document).on('click', '#edit_model', function() {
      // validate form
      $.ajax({
          ...
      });
  });
  </code></pre>
  
  <p>The above isn't a problem but I just can't get my head around how to do it in react so I am just trying to update the simplest page in my web app to become more familiar so that I can start using it on other pages.</p>
  
  <p>Apologies for the amount of code in the question but I just want to provide a complete picture, but if I can get this I think I will be able to do the rest.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  var Models = React.createClass({
      
      getInitialState: function() {
        return {models: this.props.models};
      },
  
      handleEditModel: function(id) {
        // populate and show modal from here
        // and then be able to click the submit button to send the ajax request
      },
  
      handleRemoveModel: function(id) {
        $.ajax({           
          url: '/model/ajax_delete', 
          data: { model_id: id },
          type: 'POST',
          cache: false,           
          success: function(data) {
            this.setState({ models: data });
          }.bind(this),
          error: function() {
            console.log('error'); 
          }.bind(this)
        });
      },
  
      render: function() {
  
        var rows = [];
        
        this.state.models.map(function(model) {
          rows.push(
            &lt;Model 
              model={model}
              key={model.id}
              onRemove={this.handleRemoveModel}
              onEdit={this.handleEditModel}
            /&gt;
          );
        }, this);
  
        return (
     
          &lt;div className="row"&gt;
            &lt;div className="col-md-12"&gt;
              &lt;table id="models_list" className="table table-striped table-bordered table-hover"&gt;
                &lt;thead&gt;
                  &lt;tr role="row" className="heading"&gt;
                    &lt;th&gt;Property 1&lt;/th&gt;
                    &lt;th&gt;Property 2&lt;/th&gt;
                    &lt;th className="text-center"&gt;Options&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;{rows}&lt;/tbody&gt;
              &lt;/table&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          
        );
      }
    });
  
    var Model = React.createClass({
      handleEditModel: function() {
        this.props.onEdit(this.props.model.id);
      },
      handleRemoveModel: function() {
        this.props.onRemove(this.props.model.id);
      },
      render: function() {
        return (
          &lt;tr id={"model_" + this.props.model.id}&gt;
            &lt;td&gt;{this.props.model.property_1}&lt;/td&gt;
            &lt;td&gt;{this.props.model.property_2}&lt;/td&gt;
            &lt;td className="text-center"&gt;
              &lt;a href="javascript:;" className="btn btn-xs" onClick={this.handleEditModel}&gt;&lt;i className="fa fa-pencil"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a href="javascript:;" className="btn btn-xs" onClick={this.handleRemoveModel}&gt;&lt;i className="fa fa-remove"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        );
      }
    });
  
    var EditModelModal = React.createClass({
      render: function () {
        return (
          &lt;div id="edit_model_modal" className="modal fade" tabIndex="-1" role="basic" aria-hidden="true"&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" aria-hidden="true"&gt;&lt;/button&gt;
                  &lt;h4 className="modal-title"&gt;Edit Model&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div className="modal-body"&gt;
                  
                  &lt;form id="edit_model_form" action="#" className="form-horizontal"&gt;
  
                    &lt;input type="hidden" name="model_id" value="" /&gt;
  
                    &lt;div className="form-group"&gt;
                      &lt;label className="col-md-3 control-label"&gt;Property 1 &lt;span className="mandatory" aria-required="true"&gt;*&lt;/span&gt;&lt;/label&gt;
                      &lt;div className="col-md-9"&gt;
                        &lt;input type="text" className="form-control input-medium" name="model[property_1]" /&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div className="form-group"&gt;
                      &lt;label className="col-md-3 control-label"&gt;Property 2&lt;/label&gt;
                      &lt;div className="col-md-9"&gt;
                        &lt;input type="text" className="form-control" name="model[property_2]" /&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                  &lt;/form&gt;
                &lt;/div&gt;
                &lt;div className="modal-footer"&gt;
                  &lt;button type="button" className="btn" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                  &lt;button type="button" id="edit_model" className="btn" data-dismiss="modal"&gt;Edit&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        );
      }
    })
  
    ReactDOM.render(
      &lt;Models models={&lt;%= @models.to_json %&gt;} /&gt;,
      document.getElementById('react')
    );</code></pre>
  </div>
  </div>
  </p>