The article represents high-level concepts including component design and event delegation and, demo/code samples in relation with how to add or delete a table row dynamically. For AngularJS enthusiasts, it also presents quick differences and few similarities (so to say) as well. The UI is demonstrated on the following page: http://tuts-javascript.appspot.com/reactjs-add-remove-table-row. Feel free to comment/suggest on any aspects of the article including concepts and code samples.
Following is how the design is laid out:
From above, one thing that becomes clear is the component-oriented design. In above design, CompanyApp is the composite component that is composed of two other components named as CompanyList and NewRow. In addition, CompanyList is a composite component that is composed of list of Company components.
This is where the power of ReactJS shows up. One could design the UI as components and, then write the code appropriately to achieve the following key objectives:
Notice the following concepts in the code below:
For AngularJS enthusiasts, following points (differences/similarities) can be noted:
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> ); } });
Notice the following concepts in the code below:
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> ); } });
Notice the following concepts in the code below:
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> <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.
Last updated: 28th April, 2024 As a data scientist, understanding the nuances of various cost…
Last updated: 28th April, 2024 In this post, you will learn the concepts related to…
Last updated: 26th April, 2024 In this blog post, we will discuss the logistic regression…
Last updated: 22nd April, 2024 As data scientists, we navigate a sea of metrics to…
Last updated: 22nd April, 2024 This post will teach you about the gradient descent algorithm…
Last updated: 19th April, 2024 Among the terminologies used in training machine learning models, the…
View Comments
I configured like index.html and app.js then I ran like npm run webpack
Earlier I did simple form table and click on submit button then shows the data in the table.
Please suggest on this . It would be great for me.
Thanks in advance.........
Ravi
Please send me the working copy of "ReactJS Tutorial – How to Add or Delete Table Row Dynamically" in reactJs Example.
Thanks,
Ravi
hI, i am in edit function in same ur code, pls share me edit function
Sorry, i am struck in edit function in same ur code, pls share me edit function
Your comment is awaiting moderation.
The reason you needed that = this is because within that inner function, "this" no longer refers to the outer component.