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)
)
}
});
this.showResults()
it should bevar self = this;
and inside the success handlerself.showResults(response)
showResults()
and do I have to change it intobind
too?