[Chartjs]-Reusable react component with Canvas doesn't render canvas with its props

by

1👍

✅

The issue was here, I will share here in case someone have had same issue, can find it.

Instead of 

   this.setState({
      canvasList: [newCanvas, 
          ...this.state.canvasList]
   })

You should write 

   this.setState({
      canvasList: [...this.state.canvasList, 
         newCanvas]
   })

I still don’t know why, but it fixed the problem.

1👍

I believe that your issue here is that you’re rendering the canvas components programmatically. If something was not present when the page first loaded, then event listeners are not actively looking for it.

I’m sure there’s a more elegant solution than mine, but I tend to get around this issue by writing something like.

state={ updated: false}


componentDidMount(){
this.setState({updated:true})
}

Updating the state forces a rerender, and the event listeners will know to pay attention to the relevant component.

Leave a comment