how to add row to a table using ReactJS on button click - reactjs

Question

I have a table and I want to add a row to it when ADD button is clicked. How can I do that using ReactJS instead of simple JavaScript?
code:
var RecordsComponent = React.createClass({
render : function() {
return (
<div>
<table>
<tr>
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
</tr>
<tr>
<td}>row 3</td>
</tr>
</table>
<button id="addBtn" onClick={addRow}>ADD</button>
</div>
);
},
addRow : function() {
//how to add row using ReactJS?
},
});
React.render(<RecordsComponent/>, document.getElementById('display'))

Answer 1

You need to make your React component have a state and render the component accordingly based on that data. Forget the old "DOM modification" paradigm where you are playing directly with HTML elements.
Untested but should carry the idea across:
var RecordsComponent = React.createClass({
getInitialState: {
return {
rows: ['row 1', 'row 2', 'row 3']
}
},
render : function() {
return (
<div>
<table>
{rows.map((r) => (
<tr>
<td>{r}</td>
</tr>
))}
</table>
<button id="addBtn" onClick={addRow}>ADD</button>
</div>
);
},
addRow : function() {
var rows = this.state.rows
rows.push('new row')
this.setState({rows: rows})
},
});
React.render(<RecordsComponent/>, document.getElementById('display'))
If you're just starting to learn React with your own test apps I would recommend using the most recent version of React, along with, among a lot of other things, the React ES6 class definitions.

Answer 2

Try something like this
var RecordsComponent = React.createClass({
getInitialState: function () {
return {
tablerows:[
{fname:"Tom",lname:"Moody",age:23}
]
};
},
addRow: function() {
// add new data from here
var newdata = {fname:"Tom",lname:"Moody",age:23}
//take the existing state and concat the new data and set the state again
this.setState({ tablerows: this.state.tablerows.concat(newdata ) });
},
rows:function(){
return this.state.tablerows.map(function(row,i){
return (<tr key={i}>
<td>{row.fname}</td>
<td>{row.lname}</td>
<td>{row.age}</td>
</tr>);
});
},
render : function() {
return (
<div>
<table>
<tr>
<td> row 1 </td>
</tr>
<tr>
<td> row 2 </td>
</tr>
<tr>
<td> row 3 </td>
</tr>
{this.rows()}
</table>
<button id= "addBtn" onClick={this.addRow}>ADD</button>
</div>
);
}
});
React.render(<RecordsComponent/>, document.getElementById('display'))