CODEWITHSUNDEEP
reactjs
ceth
ceth

Reputation: 45295

Make AJAX request when the property was changed

I would like to have a component, which get the property from parent component and make an AJAX request, based on this propery. The parent component can change this property and my child component must get another one AJAX request.

Here is my code, but I am not sure it is optimal and even correct:

<News source={this.state.currentSource} />

Component:

var News = React.createClass({

   propTypes: {
     source: React.PropTypes.string
   },

   getInitialState: function() {
     return {
       entities: []
     };
   },

   componentWillReceiveProps(nextProps) {
     var url = 'http://localhost:3000/api/sources/' + nextProps.source + '/news';
     this.serverRequest = $.get(url, function(result) {
       this.setState({
         entities: result
       });
     }.bind(this));
   },

   componentWillUnmount: function() {
     this.serverRequest.abort();
   },

   render: function() {

      // ...    
   }});

module.exports = News;

Does componentWillReceiveProps is a good place for this code?

Upvotes: 0

Views: 32

Answers (1)

finalfreq
finalfreq

Reputation: 6980

componentWillReceiveProps will work just fine, one thing I would do differently is if <News/> is getting its props from a parent component then a good pattern to follow is to have the parent component actually handle the api calls and pass down the results as props. This way your News component really only has to deal with rendering content based on its props vs rendering and managing state.

I can only see limited portion of your App so that might not fit your use case but here is a great article on doing that type of differentiation between smart and dumb components.

http://jaketrent.com/post/smart-dumb-components-react/

Upvotes: 1

Related Questions