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 your statisticsPage
component. Make it uppercase and it works fine.
According to the docs:
When an element type starts with a
lowercase
letter, it refers to a built-in component like or and results in a string'div'
or 'span' passed toReact.createElement
. Types that start with a capital letter like<Foo />
compile toReact.createElement(Foo)
and correspond to a component defined or imported in yourJavaScript
file.We recommend naming components with a capital letter. If you do have a component that starts with a
lowercase
letter, assign it to a capitalized variable before using it in JSX.
const View = () => (
<div>
<h1>Reports</h1>
<StatisticsPage />
</div>
);
var StatisticsPage = React.createClass({
getInitialState: function() {
return {info: "loading ... "};
},
componentDidMount: function() {
this.requestStatistics();
},
render: function() {
return (
<div>info: {this.state.info}</div>
);
},
requestStatistics:function(){
console.log('here');
this.setState({info:1})
console.log('works!!')
}
})
ReactDOM.render(<View/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With