UseRef in class component . Canvas not Defined

Question

I'm attempting to convert my functional component code to class component code while doing that I'm facing some difficulties to convert UseRef in class component I tried with this.refs.canvas but it says it depreciated i need to covert this code kindly guide me i am upload my code in both functional component and my attempted class component here. it shows no error but still couldn't get desired output the rectangle didn't appear on images.

Functional Component:

import React, { useRef, useEffect, useState } from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  const [data, setData] = useState([]);
  const canvas = useRef();
  let ctx = null;

  // initialize the canvas context
  useEffect(() => {
    // dynamically assign the width and height to canvas
    const canvasEle = canvas.current;
    canvasEle.width = canvasEle.clientWidth;
    canvasEle.height = canvasEle.clientHeight;

    // get context of the canvas
    ctx = canvasEle.getContext("2d");
  }, []);

  const drawRect = (info, style = {}) => {
    const { x, y, w, h } = info;
    const { borderColor = "black", borderWidth = 1 } = style;

    ctx.beginPath();
    ctx.strokeStyle = borderColor;
    ctx.lineWidth = borderWidth;
    ctx.rect(x, y, w, h);
    ctx.stroke();
  };

  const getData = () => {
    fetch("/test.json", {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    })
      .then(function (response) {
        console.log(response);
        return response.json();
      })
      .then(function (myJson) {
        console.log(myJson.annotations[0].bbox);
        setData(myJson.annotations[1].bbox);
        const x1 = myJson.annotations[2].bbox[0];
        const y1 = myJson.annotations[2].bbox[1];
        const w1 = myJson.annotations[2].bbox[2];
        const h1 = myJson.annotations[2].bbox[3];
        const r1Info = { x: x1, y: y1, w: w1, h: h1 };
        const r1Style = { borderColor: "red", borderWidth: 5 };
        drawRect(r1Info, r1Style);
      });
  };
  useEffect(() => {
    getData();
  }, []);
  // draw rectangle

  return (
    <div className="App">
      <canvas
        style={{
          height: "512px",
          width: "512px",
          backgroundImage: `url(${"https://karthiknbucket1.s3.ap-southeast-1.amazonaws.com/00000002.png"})`,
          backgroundPosition: "center",
          backgroundSize: "100% 100%",
        }}
        ref={canvas}
      ></canvas>
    </div>
  );
}

export default App;

My Attempted Class Component:

    import React from 'react';
     import './App.css'
    import 'bootstrap/dist/css/bootstrap.min.css';
    class Apps extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
              
             
            }
            this.canvas = React.createRef();
          }
    
        // initialize the canvas context
        componentDidMount() {
          const canvas = this.canvas
          let ctx = null;
          // dynamically assign the width and height to canvas
          const canvasEle = canvas.current;
    
       
          // get context of the canvas
          ctx = canvasEle.getContext("2d");
         
         const getData=()=>{
          
            fetch('/test.json'
            ,{
              headers : { 
                'Content-Type': 'application/json',
                'Accept': 'application/json'
               }
            }
            )
              .then(function(response){
                console.log(response)
                return response.json();
              })
              .then(function(myJson) {
                console.log(myJson.annotations[0].bbox);
                const x1 = myJson.annotations[2].bbox[0];
                const y1 = myJson.annotations[2].bbox[1];
                const w1= myJson.annotations[2].bbox[2];  
                const h1 = myJson.annotations[2].bbox[3];
                const r1Info = { x:x1 , y:y1, w:w1, h:h1  };
                const r1Style = { borderColor: 'red', borderWidth: 5 };
                drawRect(r1Info, r1Style);
                 
              });
              const drawRect = () =>  (info, style = {}) => {
            const { x, y, w, h } = info;
            const { borderColor = 'black', borderWidth = 1 } = style;
         
            ctx.beginPath();
            ctx.strokeStyle = borderColor;
            ctx.lineWidth = borderWidth;
            ctx.rect(x, y, w, h);
            ctx.stroke();
          }
          
          }
          return  getData(); 
        }
    
      // draw rectangle
    
     render(){
    
      return (
        <div className="App">
          
          <canvas style={{height:"512px" ,width:"512px",backgroundImage:`url(${"https://karthiknbucket1.s3.ap-southeast-1.amazonaws.com/00000001.png"})`,
        backgroundPosition:"center",backgroundSize:"100% 100%"
        }}ref={this.canvas}></canvas>
    
        </div>
        
      );
    }
    }
     
    export default Apps;

It Shows no error but the rectangle box didn't appear on images

Answer 1

I would say you need to use React's createRef function to initialize the ref. This is similar to how in your functional component you would use const canvas = useRef();

For example:

constructor(props) {
    super(props);
    this.canvasRef = React.createRef();
}