I've been trying to make an AJAX call and then add it to my view after it has been retrieved.
Nothing really happens with the current code.
const View = () => (
<div>
<h1>Reports</h1>
<statisticsPage />
</div>
);
export default View;
var statisticsPage = React.createClass({
getInitialState: function() {
return {info: "loading ... "};
},
componentDidMount: function() {
this.requestStatistics(1);
},
render: function() {
return (
<div>info: {this.state.info}</div>
);
},
requestStatistics:function(){
axios.get('api/2/statistics')
.then(res => {
values = res['data']
this.setState({info:1})
console.log('works!!')
});
}
})
You component name must begin with an Uppercase character since those beginning with lowercase are searched as default DOM elements like
div, p, span etc. Which is not the case for yourstatisticsPagecomponent. Make it uppercase and it works fine.According to the docs: