Canvas Not Rendering In Reactjs

I want to add canvas on the website that i am developing but i can seem to understand why the canvas in not showing up. what could be the issue? Below is what i have tried. When i

Solution 1:

You could use refs (note that facebook discourages the uses of refs on most situations, see the documentation.

I would do something like this:

exportclassCanvasextendsReact.Component {
  constructor(props) {
    super(props);
    this.canvas = React.createRef();
    this.context = null// this will be initializaed in componentDidMount()
  }

  componentDidMount(){
    this.context = this.canvas.getContext("2d")
  }

  ...

  render() {
    return (
      <divclassName="home"><headerid="test"onMouseEnter={() => this.handleAnimate()}
                onMouseMove={e => this.handleHover(e)}>
        </header><canvasref={this.canvas}className={style.canvas}/><!-- Make sure to size the canvas correctly using CSS --></div>  
  )}
}