Making ajax call in Reactjs, value coming empty while rendering

Question

I am new to React.js and trying to render the result from an ajax call using react but the data is not coming to the render() function. If you know any other best way to solve this issue or make an ajax call in react then please let mention the link for the same. Need to render data in react from an API.Below is the javascript for the same. The value is coming in componentDidMount method and result is having the value. But when I try to access in the render, then its empty. I tried to assign value to a global object array but that is also not working. Any solutions for this.The link mentioned in the post for fetching data is a working link. You can call that link in the browser and check for json field.

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  componentDidMount: function() {
    this.serverRequest = $.get(this.props.source, function(result) {
      this.setState({
        username = result.description,
          lastGistUrl = result.html_url
      })
    }.bind(this));
  },

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

  render: function() {
    React.createElement("div", null, this.state.username, " 's last gist's url  is ",
      React.createElement("div", null, this.state.lastGistUrl, ""), ".")

  }
});



ReactDOM.render(React.createElement(UserGist, { source: "https://api.github.com/users/octocat/gists" }), document.getElementById('container'));

Fiddler link

Yury Tarabanko · Accepted Answer · 2016-07-12 11:47:21Z

2

Your code contains syntax errors. Replace = with :.

componentDidMount: function() {
  this.serverRequest = $.get(this.props.source, function(result) {
    this.setState({
      username: result.description,
      lastGistUrl: result.html_url
    })
  }.bind(this));
},

More errors to come:

render missing return statement. Should be return React.createElement
result is an array not an object. You need to somehow handle this. For example pick the first element result = result[0]
setState is method. You should call it not make an assignment setState=({}) should be setState({}) This one was in demo code.

See fixed demo.

edited Jul 12, 2016 at 11:47

answered Jul 12, 2016 at 10:53

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Harshit C. Over a year ago

Have made changes as you mentioned, but values not coming for rendering. Have added one more line, have a look and revert for further changes. Just check the API link that is being used.

Yury Tarabanko Over a year ago

@HarshitC. Set a breakpoint in success callback. And check if it was called and what was the value of result.

Harshit C. Over a year ago

Values is coming in componentDidMount method but not in the render method. Array of objects is coming in componentDidMount , same should come in render method which is not happening.

Yury Tarabanko Over a year ago

@HarshitC. Could you plz create an example using jsfiddle.net or plncr.co demonstrating the issue? This code should work.

Harshit C. Over a year ago

check the fiddler link in the question. If any issues please revert.

|

Collectives™ on Stack Overflow

Making ajax call in Reactjs, value coming empty while rendering

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related