From c472739baaa9357495faf8bd90db4d085a5277ba Mon Sep 17 00:00:00 2001
From: casper <casperlamboo@gmail.com>
Date: Sat, 22 May 2021 17:37:41 +0200
Subject: [PATCH] update refs

---
 src/interface/index.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/interface/index.js b/src/interface/index.js
index a9e8351..a1a3e6f 100644
--- a/src/interface/index.js
+++ b/src/interface/index.js
@@ -112,6 +112,8 @@ class Interface extends React.Component {
   constructor(props) {
     super(props);
 
+    this.canvasElement = React.createRef();
+
     const scene = createScene(this.props);
     this.state = {
       scene,
@@ -126,9 +128,8 @@ class Interface extends React.Component {
   }
 
   componentDidMount() {
-    const { canvas } = this.refs;
     const { scene } = this.state;
-    scene.updateCanvas(canvas);
+    scene.updateCanvas(this.canvasElement.current);
 
     const { mesh } = this.props;
     if (mesh) {
@@ -248,8 +249,7 @@ class Interface extends React.Component {
 
   componentDidUpdate() {
     const { scene: { updateCanvas } } = this.state;
-    const { canvas } = this.refs;
-    if (updateCanvas && canvas) updateCanvas(canvas);
+    if (updateCanvas && this.canvasElement.current) updateCanvas(this.canvasElement.current);
   }
 
   onResize3dView = (width, height) => {
@@ -325,7 +325,7 @@ class Interface extends React.Component {
     const d3Panel = (
       <div className={classes.d3View}>
         <ReactResizeDetector handleWidth handleHeight onResize={this.onResize3dView} />
-        <canvas className={classes.canvas} ref="canvas" />
+        <canvas className={classes.canvas} ref={this.canvasElement} />
         <div className={classes.controlBar}>
           <div className={classes.detail}>
             <p>Dimensions: {objectDimensions}</p>