How can we fix my ReactJS canvas resize prototype?

Question

I'm trying to make a fairly simple ReactJS component that dynamically sets width and height to match the canvas DOM element's pixel dimensions but running into a problem.

I wrote it as short and simple as possible to help anyone reading this question.

Here is my prototype:
https://joshi1983.github.io/pages/reactCanvasPrototype/

All of my custom JavaScript is in: https://joshi1983.github.io/pages/reactCanvasPrototype/reactApp.js

When I check the console, my console.log statements show:
render called. canvasWidth = 100, canvasHeight = 100
reactApp.js:8 componentDidMount called. canvasWidth = 100, canvasHeight = 100
reactApp.js:19 Tried setting state to {"canvasWidth":895,"canvasHeight":696}
reactApp.js:42 render called. canvasWidth = 895, canvasHeight = 696

How can I get my drawing code to run after the correct canvasWidth and canvasHeight have been processed by the render method?

Answer 1

You could try an approach with promises, or you can try to use state and props updates. I currently only have my phone with me, I can look at the code in 2 weeks, then I can use my Computer to inspect the Code. (If the problem isn't solved by then)