2

Following this. I have created a component and from that trying to fetch data using ajax request. I have written code for rendering it but it's not working and also no error after page load. I am new to react so not much idea, probably that's why unable to inspect the issue. Any help will be great.

// Js
React.createElement('tbody', {}, UserItem)

// Component
var UserItem = React.createClass({
propTypes: {
  name: React.PropTypes.string.isRequired,
  email: React.PropTypes.string,
  dob: React.PropTypes.string,
},

getInitialState: function() {
  return {
    users: []
  }
},

showResults: function(response) {
  this.setState({
    users: response
  })
},

search: function(URL) {
  $.ajax({
    type: "GET",
    dataType: 'json',
    url: URL,
    success: function(response){
      this.showResults(response);
    }.bind(this)
  });
},

componentDidMount: function() {
  this.search("users/usersData");
},

render: function() {
  return (
    UserItems
  )
},
})

var UserItems = React.createClass({
  render: function() {
    var resultItems = this.state.users.map(function(result) {
      return React.createElement(ResultItem, {id:result.id, name:result.name});
    });

    return React.createElement('div', {}, resultItems);
  },
})

var ResultItem = React.createClass({
  render: function(){
    return React.createElement('tr', {}, 
      React.createElement('td', {}, this.props.id),
      React.createElement('td', {}, this.props.name),
      React.createElement('td', {}, this.props.name),
      React.createElement('td', {}, this.props.name)
    )
  }
});
5
  • it should not be like this.showResults() it should be var self = this; and inside the success handler self.showResults(response) Sep 27, 2016 at 9:27
  • Do I have to define the self variable globally or just for showResults() and do I have to change it into bind too?
    – aavrug
    Sep 27, 2016 at 9:30
  • nope not needed inside search function Sep 27, 2016 at 9:31
  • did it help you Sep 27, 2016 at 9:34
  • No It didn't worked.
    – aavrug
    Sep 27, 2016 at 9:41

2 Answers 2

0

You should implement render() method.

Something similar to this one should work:

render: function() {
 return (
  <div>
    {this.state.users.map(function(user){
       return <h2>{user}</h2>
     })}
  </div>
 );
}
1
  • I cannot use this code I need to make this into a table and since I am not using jsx that's why also getting errors for angular brackets.
    – aavrug
    Sep 27, 2016 at 9:54
0

Try this

search: function(URL) {
  var self = this;
  $.ajax({
    type: "GET",
    dataType: 'json',
    url: URL,
    success: function(response){
      self.showResults(response);
    }.bind(this)
  });
}
5
  • You need to call onChange too Sep 27, 2016 at 9:38
  • I am just doing this on page load then why need to call onChange?
    – aavrug
    Sep 27, 2016 at 9:40
  • That's the biggest problem, there is no error in console.
    – aavrug
    Sep 27, 2016 at 9:42
  • can you pint console.log(response) in the showResults function before this.setState() Sep 27, 2016 at 9:43
  • Let us continue this discussion in chat.
    – aavrug
    Sep 27, 2016 at 9:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.