React - How to Populate and Show a Modal, then Send AJAX Request on Submit

Question

CodePen here (minus delete ajax request): http://codepen.io/martincarlin87/pen/KzPWOw

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.

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.

I have the handleEditModel 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.

Using jQuery, I would do something like:

$(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');
});

and then another function which handled the submission and ajax request

$(document).on('click', '#edit_model', function() {
    // validate form
    $.ajax({
        ...
    });
});

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.

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.

  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(
          <Model 
            model={model}
            key={model.id}
            onRemove={this.handleRemoveModel}
            onEdit={this.handleEditModel}
          />
        );
      }, this);

      return (
   
        <div className="row">
          <div className="col-md-12">
            <table id="models_list" className="table table-striped table-bordered table-hover">
              <thead>
                <tr role="row" className="heading">
                  <th>Property 1</th>
                  <th>Property 2</th>
                  <th className="text-center">Options</th>
                </tr>
              </thead>
              <tbody>{rows}</tbody>
            </table>
          </div>
        </div>
        
      );
    }
  });

  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 (
        <tr id={"model_" + this.props.model.id}>
          <td>{this.props.model.property_1}</td>
          <td>{this.props.model.property_2}</td>
          <td className="text-center">
            <a href="javascript:;" className="btn btn-xs" onClick={this.handleEditModel}><i className="fa fa-pencil"></i></a> <a href="javascript:;" className="btn btn-xs" onClick={this.handleRemoveModel}><i className="fa fa-remove"></i></a>
          </td>
        </tr>
      );
    }
  });

  var EditModelModal = React.createClass({
    render: function () {
      return (
        <div id="edit_model_modal" className="modal fade" tabIndex="-1" role="basic" aria-hidden="true">
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <button type="button" className="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 className="modal-title">Edit Model</h4>
              </div>
              <div className="modal-body">
                
                <form id="edit_model_form" action="#" className="form-horizontal">

                  <input type="hidden" name="model_id" value="" />

                  <div className="form-group">
                    <label className="col-md-3 control-label">Property 1 <span className="mandatory" aria-required="true">*</span></label>
                    <div className="col-md-9">
                      <input type="text" className="form-control input-medium" name="model[property_1]" />
                    </div>
                  </div>

                  <div className="form-group">
                    <label className="col-md-3 control-label">Property 2</label>
                    <div className="col-md-9">
                      <input type="text" className="form-control" name="model[property_2]" />
                    </div>
                  </div>

                </form>
              </div>
              <div className="modal-footer">
                <button type="button" className="btn" data-dismiss="modal">Cancel</button>
                <button type="button" id="edit_model" className="btn" data-dismiss="modal">Edit</button>
              </div>
            </div>
          </div>
        </div>
      );
    }
  })

  ReactDOM.render(
    <Models models={<%= @models.to_json %>} />,
    document.getElementById('react')
  );

score 2 · Answer 1 · edited May 23 '17 at 11:59

In my opinion you should not manage your self the Modal details. I advice you to take a look to https://react-bootstrap.github.io/ (as suggested in Bootstrap modal in React.js). This is a library pretty well documented and it have a nice Modal in it.

var Modal = ReactBootstrap.Modal

And then use it as <Modal/>.

Notice that Modal has a show properties that when it is true the modal is shown.

The best to use it is to wrap it in a component of your own where you store the state {show : true/false}. Then declare an open and a close method that changes the state accordingly.

var BootstrapModal = React.createClass({
    getInitialState : function () {
        return {
           show : false
        }
    },
    close: function() {
        if (!this.state.saving) {
            this.setState({
               show: false
            });
        }
    },
    open: function() {
        this.setState({
            show : true
        });
    },
    render: function() {
        return (
            <Modal show={this.state.show}>
                ...
            </Modal>
        );
    },
});

The when you use it in your external component you can do something like this:

var MyComponent = React.createClass({
    handleSomeEventInARowSomewhere : function () {
         ....
         this.refs.mymodal.open();
    },
    render : function () {
         return (
              ...
              <BootstrapModal ref="mymodal"/>
              ...
         )
    }
});

This way you can open your modal when you want, see that you can pass stuff in the open method so feel free to adapt this example to your own needs.

thanks, I was looking at it after also reading that question but I am kinda of facing the some problem with trying to figure out how to go about actually using it. — martincarlin87, Feb 25 '16 at 11:21

React - How to Populate and Show a Modal, then Send AJAX Request on Submit

1 Answers1