I'm developing a small react application that consist of a chart ponent and some other ponents. The chart ponent is a separate file/ponent/child ponent.When i click the button in the main container it calls a promise (using axio) and it returns some data as response. This response data is set as states and that state is passed to the chart ponent as props.But the chart doesn't load. This is because the chart has already being loaded, since the initial states where empty the chart is also empty. Is there any way of rendering the chart ponent only after the promise returns data?
this is my code
the button click event
ClickMe = () =>{
axios.get('')
.then((response)=>{
this.setState({
tags:response.data
});
console.log(this.state.tags);
}).catch((err)=>{
console.log(err);
});
}
the render function
render(){
return(
<div>
<otherComponents/>
<chart data={this.state.tags}/>
</div>
);
}
I'm developing a small react application that consist of a chart ponent and some other ponents. The chart ponent is a separate file/ponent/child ponent.When i click the button in the main container it calls a promise (using axio) and it returns some data as response. This response data is set as states and that state is passed to the chart ponent as props.But the chart doesn't load. This is because the chart has already being loaded, since the initial states where empty the chart is also empty. Is there any way of rendering the chart ponent only after the promise returns data?
this is my code
the button click event
ClickMe = () =>{
axios.get('http://xyzsdsd./abc')
.then((response)=>{
this.setState({
tags:response.data
});
console.log(this.state.tags);
}).catch((err)=>{
console.log(err);
});
}
the render function
render(){
return(
<div>
<otherComponents/>
<chart data={this.state.tags}/>
</div>
);
}
- If you continue using React in that way, you're going to run into countless headaches. You should look into Flux and popular implementation/adaptation redux. Many people think React is a fully-featured framework like Angular – it's not. React is a small library that handles a very specific part of your front-end apps. React has given you the freedom to choose the other tools you want to acplish other tasks like fetching data, maintaining a large application state, routing, etc. – Mulan Commented Nov 10, 2016 at 18:17
2 Answers
Reset to default 3Add a condition in your render, to only render the chart ponent when your state.tags object is valid. On initial render, chart will not be rendered. When your AJAX call returns and setState() is called, render() will be called again with a non-null state.tags and thus render your chart.
render(){
let chart;
if (this.state.tags) {
chart = <chart data={this.state.tags}/>;
}
return (
<div>
<otherComponents/>
{chart}
</div>
);
}
for good UX you might want to think about the different states and flows that your ponent or piece of the UI might encounter.
So from the top of the head I would have 3 states. Empty slate, loading (since your reaching out to the server this could also take some time) and chart with data.
So depending on the state you might want to display different ponents.
I would set the InitialState for in ES6 via constructor or without ES6 in the getInitialState function.
If you want to kick of the ajax onLoad of the ponent axios.get you should think about placing the ponentDidMount.
This could also work with the React-Router. So whenever you navigate to the ChartComponent it loads when it gets mounted.
If you happen to recognize that your if statements in your render function get to plicated because you business logic demands for more. You should definitely check out Redux (http://redux.js/)in bination with React to have better control of state and data flow.
Really great insides how to structure react apps with redux could be found in this free video series. https://egghead.io/courses/getting-started-with-redux https://egghead.io/courses/building-react-applications-with-idiomatic-redux
Hope that helps.