ReactJS Tutorial – How to Add or Delete Table Row Dynamically

Overview of CompanyApp

Notice the following concepts in the code below:

• getInitialState API called to set the initial state to the default list passed to the CompanyApp component
• handleNewRowSubmit: This API is used to change the state due to addition of a new company. Note the “setState” method being called to set the new state. This ensures that UI gets updated with new data.
• handleCompanyRemove: This API is used to change the state due to removal of company from existing company list. Again, note the “setState” method invoked which ensures that UI gets updated.

For AngularJS enthusiasts, following points (differences/similarities) can be noted:

• For updating UI, all that is needed to be done is change the UI state model, companylist in the example below, and invoke “setState” method to update the UI.
• CompanyList and NewRow gives a feeling of custom directives. 🙂 These are actually React components.
• I have to admit that I ended up writing more code to achieve the same objective in ReactJS.  Also, UI code is embedded with Component’s definition. Take a look at this demo done with AngularJS.

var CompanyApp = React.createClass({
        getInitialState: function() {
          return {companylist:this.props.companies};
        },
        handleNewRowSubmit: function( newcompany ) {
          this.setState( {companylist: this.state.companylist.concat([newcompany])} );
        },
        handleCompanyRemove: function( company ) {

          var index = -1;	
          var clength = this.state.companylist.length;
      		for( var i = 0; i < clength; i++ ) {
      			if( this.state.companylist[i].cname === company.cname ) {
      				index = i;
      				break;
      			}
      		}
      		this.state.companylist.splice( index, 1 );	
      		this.setState( {companylist: this.state.companylist} );
        },
        render: function() {
          var tableStyle = {width: '100%'};
          var leftTdStyle = {width: '50%',padding:'20px',verticalAlign: 'top'};
          var rightTdStyle = {width: '50%',padding:'20px',verticalAlign: 'top'};
          return ( 
            

<table style={tableStyle}>
              

<tr>
                

<td style={leftTdStyle}>
                  <CompanyList clist={this.state.companylist} onCompanyRemove={this.handleCompanyRemove}/>
                </td>


                

<td style={rightTdStyle}>
                  <NewRow onRowSubmit={this.handleNewRowSubmit}/>
                </td>


              </tr>


          </table>


          );
        }
      });

CompanyList Class: Displays a list of Companies

Notice the following concepts in the code below:

• handleRemoveCompany invokes the onCompanyRemove method which invokes the callback method to pass the event upward in the hierarchy.
• render method which creates the table
• Company component which is passed the company (later accessed as this.props.company) property to create the row.

var CompanyList = React.createClass({
        handleCompanyRemove: function(company){
          this.props.onCompanyRemove( company );
        },
        render: function() {
          var companies = [];
          var that = this; // TODO: Needs to find out why that = this made it work; Was getting error that onCompanyDelete is not undefined
          this.props.clist.forEach(function(company) {
            companies.push(<Company company={company} onCompanyDelete={that.handleCompanyRemove} /> );
          });
          return ( 
            

<div>
              

<h3>List of Companies</h3>


              

<table className="table table-striped">
                

<thead>

<tr>

<th>Company Name</th>


<th>Employees</th>


<th>Head Office</th>


<th>Action</th>

</tr>

</thead>


                

<tbody>{companies}</tbody>


              </table>


            </div>


            );
        }
      });

Company Class

Notice the following concepts in the code below:

• handleRemoveCompany invokes the onCompanyDelete method which invokes the callback method to pass the event upward in the hierarchy to remove or delete the existing company from the company list. Remember the event delegation model.

var Company = React.createClass({
        handleRemoveCompany: function() {
          this.props.onCompanyDelete( this.props.company );
          return false;
        },
        render: function() {
          return (
            

<tr>
              

<td>{this.props.company.cname}</td>


              

<td>{this.props.company.ecount}</td>


              

<td>{this.props.company.hoffice}</td>


              

<td><input type="button" className="btn btn-primary" value="Remove" onClick={this.handleRemoveCompany}/></td>


            </tr>


            );
        }
      });</pre>
</div>

&nbsp;
<div>
<h3 style="background-color: #81d4fa; padding: 15px;">New Row is Added</h3>

Notice the following concepts in the code below:
<ul>
<li>handleSubmit reads/captures the input and invokes the onRowSubmit method which invokes the <strong>callback method</strong> to pass the event upward in the hierarchy to add a new company (row) in the table. <strong>Remember the event delegation model.</strong></li>
</ul>
<pre lang="xml" escaped="true">var NewRow = React.createClass({
        handleSubmit: function() {
          var cname = this.refs.cname.getDOMNode().value;
          var ecount = this.refs.ecount.getDOMNode().value;
          var hoffice = this.refs.hoffice.getDOMNode().value;
          var newrow = {cname: cname, ecount: ecount, hoffice: hoffice };
          this.props.onRowSubmit( newrow );

          this.refs.cname.getDOMNode().value = '';
          this.refs.ecount.getDOMNode().value = '';
          this.refs.hoffice.getDOMNode().value = '';
          return false;
        },
        render: function() {
          var inputStyle = {padding:'12px'}
          return ( 
            

<div className="well">
              

<h3>Add A Company</h3>


            

<form onSubmit={this.handleSubmit}>
              

<div className="input-group input-group-lg" style={inputStyle}>
                <input type="text" className="form-control col-md-8" placeholder="Company Name" ref="cname"/>
              </div>


              

<div className="input-group input-group-lg" style={inputStyle}>
                <input type="text" className="form-control col-md-8" placeholder="Employee Count" ref="ecount"/>
              </div>


              

<div className="input-group input-group-lg" style={inputStyle}>
                <input type="text" className="form-control col-md-8" placeholder="Headoffice" ref="hoffice"/>
              </div>


              

<div className="input-group input-group-lg" style={inputStyle}>
                <input type="submit" className="btn btn-primary" value="Add Company"/>
              </div>


            </form>

); } });

The code could be found on this Hello ReactJS – github page. Feel free to comment on the design or event delegation model as I am also in the learning phase at this point.