Rerender React component with new AJAX request parameter values

Question

I have the following response component that retrieves Ajax data on page load as follows:

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 override the component when the date is changed with datepicker, so the Ajax date parameter is changing, and I need to make another request with these new values.

What I 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 happens. How can i solve this? And this can only be done using JavaScript / jsx, without the need for a thread and, most importantly, without node.js?

Ps. I am using FixedDataTable in this example.

Answer 1

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

To implement the componentWillReceiveProps life cycle with the same logic and pass 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 slight problem getting a TypeError: it is not possible to add a property context, the object is not expanding - but this was because I originally created the component with JavaScript, and I was reerendering in jsx. It should be the same .. for example:

If I did this initially:

 MyTable = React.createFactory(MyTable) 

Then this will not work to reboot:

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

But this:

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