I have one child component Listing which will get state variable this.state.loading as prop, it will be used to repull data from the server. along with this state variable, i have two more state variables which controls button properties where it is been refreshed or not. My problem is state variables in component is not getting updated when the button is clicked. I see REST calls are being called, however second REST call doesn't appear to be working. Second Rest Call works if i just call on the browser. pls check why state variables are not getting updated and why second Rest api works on the browser and not in this program. Thanks
class App extends React.Component{
state ={
loading:false,
childload:true,
placeholder:'',
};
enterLoading = () => {
this.setState( ()=> {
return {
loading: true,
placeholder:'Refresh started',
childload:false,
};
});
fetch("api/doScrape")
.then(response => {
if (response.status > 400) {
return this.setState(() => {
return { placeholder: "Something went wrong during Scraping data" };
});
}
});
fetch("api/doCalc")
.then(response => {
if (response.status > 400) {
return this.setState((placeholder) => {
return { placeholder: "Something went wrong during Vix Calc!" };
});
}
});
this.setState(() => {
return {
loading: false,
childload:true,
placeholder:'',
};
});
};
render()
{
return (<div className="App">
<h1> Calculations</h1>
<Button type="primary" loading={this.state.loading} onClick={() => this.enterLoading()}>
Refresh
</Button>{this.state.placeholder}
<Listing loading={this.state.childload}/>
</div>);
}
}
export default App;