ReasonReact - Manipulating HTML canvas through refs

reasonreact
#1

Having trouble setting the properties of an html canvas element in my didMount function. In React.JS the corresponding code would be something like

componentDidMount(){
this.canvas.width = 1000;
this.canvas.height = 1000;
this.ctx = this.canvas.getContext(‘2d’);
}

render(){
return(
<canvas
ref={(ref) => (this.canvas = ref)}
/>
)
}

Right now I have

type state = {
myCanvasRef: ref(option(Dom.element))
};

let setCanvasRef = (theRef, {ReasonReact.state}) => {
state.myCanvasRef := Js.Nullable.toOption(theRef);
};

let make = ( _children ) => {
…component,
initialState: () => {myCanvasRef: ref(None)},
didMount: (self) => {
self.myCanvasRef.width = 1000;
},

render: self => {
    <canvas ref={self.handle(setCanvasRef)}> </canvas>
}

};

I keep getting:

This record expression is expected to have type ReasonReact.componentSpec('a, 'b, 'c, 'd, 'e)
The field myCanvasRef does not belong to type ReasonReact.self

Can anyone help explain what I’m doing wrong?

#2

@claytoncrockett From my understanding, if you are getting that error, This record expression is expected to have type ReasonReact.componentSpec('a, 'b, 'c, 'd, 'e), then you are not applying all the correct arguments to your components. For example, you are not using the reducer function which you should be using, even if you are not doing anything inside of it, in order to satisfy the definition of the reducer component.

#3

@claytoncrockett Also, self.myCanvasRef.width = 1000; is incorrect. The error, The field myCanvasRef does not belong to type ReasonReact.self, is because it should be self.state.myCanvasRef.