Rerender React component with new AJAX query parameter values

Question

I have the following react component which fetches Ajax data on the initial page load like this:

var MyTable = React.createClass({

    getInitialState: function() {
        return {
            rows: [
                ['Something, ' '],
                ['Something else', ' ']                ]
        };
    },

    componentDidMount: function() {
        var self = this;
        $.get('http://domain.com/api/Orders/from-date/' + fromDate + '/to-date/' + toDate, 
            function(result) {
                var newState = React.addons.update(this.state, {
                    rows: {
                        0: { 
                            1: { $set: result }
                        }
                    }
                });
                this.setState(newState);            
            }.bind(this)
        );
    },

    render: function() {
        return (

            <Table
                rowHeight={50}
                rowGetter={(rowIndex) => {
                    return this.state.rows[rowIndex];
                }}
                rowsCount={this.state.rows.length}
                onRowClick={this._onRowClick}
                width={1000}
                height={342}
                groupHeaderHeight={40}
                headerHeight={0}>
                <ColumnGroup label="Products"
                             fixed={true}>
                    <Column label=""
                            width={col1}
                            dataKey={0} />
                    <Column label=""
                            width={700}
                            dataKey={1} />
                </ColumnGroup>
            </Table>

        );
    }
});
MyTable = React.createFactory(MyTable )
React.render(MyTable(),
    document.getElementById('my-table-container')
);

My problem is that I cannot rerender the component when the date is changed from the datepicker thus the Ajax date parameter changes and another request with these new values need to be made.

What I've tried:

$(function(){
    $("#calculate-orders").on("click",function(){
        fromDate = document.getElementById("from-date").value;
        toDate = document.getElementById("to-date").value;

        React.render(MyTable(),
            document.getElementById('my-table-container')
        );

    })
})

But nothing seems to happen. How can I solve this? And can it be done with JavaScript/jsx only, without the need for flux and most importantly, without node.js?

Ps. I'm using FixedDataTable in this example.

Answer 1

The answer was as Furqan Zafar said (thanks man).

To implement the componentWillReceiveProps lifecycle method with the same logic and pass the new properties.

$.get('http://domain.com/api/Orders/from-date/' + nextProps.fromDate + '/to-date/' + nextProps.toDate, 
            function(result) {
                var newState = React.addons.update(this.state, {
                    rows: {
                        0: { 
                            1: { $set: result }
                        }
                    }
                });
                this.setState(newState);            
            }.bind(this)
        );

I had a little problem with it getting TypeError: Can't add property context, object is not extensible - but that was because I originally had created the component with JavaScript and I was rerendering in jsx. It needs to be the same.. eg:

If I did this initially:

MyTable = React.createFactory(MyTable)

Then this wouldn't work to rerender:

React.render(
    <MyTable fromDate={fromDate} toDate="{toDate}"/>,
    document.getElementById('my-table-container')
);

But this would:

React.render(
    MyTable(
        {
            'fromDate': fromDate,
            'toDate': toDate
        }), document.getElementById('my-table-container')
    );