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:

export class Canvas extends React.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 (
      <div className="home">
        <header id="test" onMouseEnter={() => this.handleAnimate()}
                onMouseMove={e => this.handleHover(e)}>
        </header>
        <canvas ref={this.canvas} className={style.canvas}/>
        <!-- Make sure to size the canvas correctly using CSS -->
      </div>  
  )}
}