replace createRef with useRef

2 files changed, 12 insertions, 12 deletions

diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js b/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
index b578016f..544b203d 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
@@ -1,4 +1,4 @@
-import React, { createRef, useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { List, ListItemText, Tooltip, Popover } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
@@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) => ({
 
 export default function SideComp ({ component }) {
   const classes = useStyles()
-  const imageRef = createRef()
+  const imageRef = useRef()
 
   const [anchorEl, setAnchorEl] = useState(null)
 
@@ -70,16 +70,16 @@ export default function SideComp ({ component }) {
 
           {
             component.categories.length === 1 &&
-              <ListItemText>
-                <b>{link2}:</b> {component.categories[0].name}
-              </ListItemText>
+            <ListItemText>
+              <b>{link2}:</b> {component.categories[0].name}
+            </ListItemText>
           }
 
           {
             component.categories.length > 1 &&
-              <ListItemText>
-                <b>{link3}:</b> {component.categories.map((c) => <li key={c.id}>{c.name}</li>)}
-              </ListItemText>
+            <ListItemText>
+              <b>{link3}:</b> {component.categories.map((c) => <li key={c.id}>{c.name}</li>)}
+            </ListItemText>
           }
 
         </List>
diff --git a/blocks/eda-frontend/src/pages/SchematicEditor.js b/blocks/eda-frontend/src/pages/SchematicEditor.js
index db55f996..8134344d 100644
--- a/blocks/eda-frontend/src/pages/SchematicEditor.js
+++ b/blocks/eda-frontend/src/pages/SchematicEditor.js
@@ -1,5 +1,5 @@
 // Main Layout for Schemaic Editor page.
-import React, { createRef, useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { TailSpin } from 'react-loader-spinner'
 import { CssBaseline } from '@material-ui/core'
@@ -29,9 +29,9 @@ const useStyles = makeStyles((theme) => ({
 
 export default function SchematicEditor (props) {
   const classes = useStyles()
-  const compRef = createRef()
-  const gridRef = createRef()
-  const outlineRef = createRef()
+  const compRef = useRef()
+  const gridRef = useRef()
+  const outlineRef = useRef()
   const dispatch = useDispatch()
   const [mobileOpen, setMobileOpen] = useState(false)
   const isLoading = useSelector(state => state.saveSchematicReducer.isLoading)