Search code examples
javascriptreactjstypescripthtml5-canvas

Need pattern for typescript when use useRef

const CanvasMap = () => {
      const canvasFef = React.useRef<HTMLInputElement>(null)
      useEffect(() => {
        canvasFef && canvasFef.current && cities.forEach(function (item) {
             // logic here
        })
      }, [canvasFef]);
      return (
          <canvas id="canvas"
                  ref={canvasFef}
          ></canvas>
      )
    };

I got error

Property 'getContext' does not exist on type 'HTMLInputElement'

TS2322: Type 'MutableRefObject' is not assignable to type 'LegacyRef'. Type 'MutableRefObject' is not assignable to type 'RefObject'. Types of property 'current' are incompatible. Type 'HTMLInputElement' is missing the following properties from type 'HTMLCanvasElement': captureStream, getContext, toBlob, toDataURL

Solution 
  • const canvasFef = React.useRef<HTMLCanvasElement | null>(null);

    Try this.