Passing updated variable to RreactJS component but variable not updating correctly inside the component

I'm passing a variable called rows to a component "Hello." If I remove that component and simply put "p" tags around {rows} it shows the variable updating correctly. However, when I pass {rows} to "Hello" it doesn't update right. Can someone explain some form of a solution to this please!

NOTE: this snippet is part of a bigger project. There is a state based on user selection that updates the "filterBy" variable. So I'm not sure this is a rendering issue based on change State cause rows is changing and updating.

Code Below:

    var Hello = React.createClass({
    rowMake: function(){
        return (
            <div>
                {this.props.rows.map(function(row, index){
                    return(
                        <tr>
                            <td key={index}>{row.title}</td>
                            <td>{row.status}</td>
                            <td>{row.created_at}</td>
                            <td>{row.updated_at}</td>    
                        </tr>
                    );
                  })
                }
            </div>
        );
    },
    render: function() {
          return (
            <div className="container">           
                <table className="table">
                  <thead>
                    <tr>
                      <th>Title</th>
                      <th>Status</th>
                      <th>Created</th>
                      <th>Updated</th>
                      <th>Delete</th>
                    </tr>
                  </thead>
                  <tbody>{this.rowMake()}</tbody>        
                </table>
          </div>
          );
    }
});


//RequestTable creates the table head and body.

var RequestTable = React.createClass({
    render: function() {
        requests = this.props.requests;
        filterBy = this.props.filterBy;
        var rows = [];
        for(var i = 0; i<requests.length; i++){
            if(filterBy == 'All'){
                rows.push(requests[i]);
            }
            else if(filterBy == 'Approved'){
                if(requests[i]["status"] == "Approved"){
                    rows.push(requests[i]);
                }
            }
            else if(filterBy == 'Denied'){
                if(requests[i]["status"] == "Denied"){
                    rows.push(requests[i]);
                }
            }
            else{
                if(requests[i]["status"] == "Pending"){
                    rows.push(requests[i]);
                }
            }
        }
        return(
            <Hello rows = {rows} />
        );
    }
});


ANSWERS:


I think your rowMake() function messing up there.

Removed the rowMake() method and updated the code in render method itself. Of course this is the better method when dealing with list of data which keeps updating with DOM events.

Updated fiddle



 MORE:


 ? react-router v4 - How to provide params to a pure function using "component" attribute
 ? Where is the location of .babelrc file?
 ? How do I pass a redux dispatch function into a smart component without using connect()?
 ? How to trigger re-renders in Jest using redux state changes rather than setState within components?
 ? matchMedia not present when testing create-react-app component which contain react-slick?
 ? node async/await -- do I need try/catch?
 ? Transpiling to C vs C++ : range of CPU instructions
 ? How to fix issues with broken sourcemaps in stylus after FontFace rule
 ? Testing AngularJS Service (Factory) with Karma and Jasmine
 ? [Ext.Loader]: Some requested files failed to load