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

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'))