0

I have a bar chart whose values comes from Axios get request. now this part is working fine, api is returning values fine and on initial render bar chart values are returned from api and chart renders fine but when i filter the content and set some other date values for chart it does get returned from api but component does not get re-rendered until I resize browser window even slightly. why is this happening, what resizing is doing in this case

this is how im handling change

 componentDidMount(){
    this.getIndividuals()
    this.getCompanies()
}

handleClick=(e)=> {  
    this.setState({clicked:true})
  }

componentDidUpdate(prevProps,prevState){
if((prevState.clicked!==this.state.clicked)){
    this.getIndividuals()
    this.getCompanies()
    this.setState({clicked:false})
    this.forceUpdate()
}
}

i tried to to use forceupdate() method but that is also not working

Salman Ahmed
  • 50
  • 10
  • 1
    you need to show the entire code, so we could understand what's going on there – Taghi Khavari Dec 29 '20 at 11:44
  • your code might be problematic since you change `clicked` to true, and you check if `clicked` is changed inside `componentDidUpdate`, you set `clicked` false and your component will render again. – Sinan Yaman Dec 29 '20 at 11:48
  • @SinanYaman but im setting clicked to be true again when button is clicked – Salman Ahmed Dec 29 '20 at 12:47
  • inside `componentDidUpdate` you set clicked again, therefore it re-renders and goes into componentDidUpdate again. In thta case you have prevState.clicked = false, this.state.clicked=false. Take a look at [this](https://stackoverflow.com/questions/30528348/setstate-inside-of-componentdidupdate) and see if that helps you. – Sinan Yaman Dec 29 '20 at 12:50

0 Answers0