From e9a493a0fc89308ab4641230a914be3ef268fc97 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Fri, 24 Jan 2020 11:49:05 -0400
Subject: [PATCH] Use ref in Mascot component rather than reaching into DOM
 directly

Accessing the dom via `document` is strongly discouraged in React.
Instead the DOM element is now referenced by ref instead.
---
 ui/app/components/ui/mascot.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/app/components/ui/mascot.js b/ui/app/components/ui/mascot.js
index 4b6aac27d704..835290487791 100644
--- a/ui/app/components/ui/mascot.js
+++ b/ui/app/components/ui/mascot.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React, { createRef, Component } from 'react'
 import metamaskLogo from 'metamask-logo'
 import debounce from 'debounce'
 
@@ -22,6 +22,8 @@ export default class Mascot extends Component {
       height,
     })
 
+    this.mascotContainer = createRef()
+
     this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
     this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
   }
@@ -43,9 +45,7 @@ export default class Mascot extends Component {
   }
 
   componentDidMount () {
-    const targetDivId = 'metamask-mascot-container'
-    const container = document.getElementById(targetDivId)
-    container.appendChild(this.logo.container)
+    this.mascotContainer.current.appendChild(this.logo.container)
   }
 
   componentWillUnmount () {
@@ -62,7 +62,7 @@ export default class Mascot extends Component {
     this.handleAnimationEvents()
     return (
       <div
-        id="metamask-mascot-container"
+        ref={this.mascotContainer}
         style={{ zIndex: 0 }}
       />
     )