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.
In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…
Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…
With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…
Anxiety is a common mental health condition that affects millions of people around the world.…
In machine learning, confounder features or variables can significantly affect the accuracy and validity of…
Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…
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.