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 yourstatisticsPage
component. Make it uppercase and it works fine.According to the docs: