From d10c3cb2ca71be0df795c9b6b6db070fa78877f2 Mon Sep 17 00:00:00 2001
From: Kaitlin Bolling <kaitlin@alley.co>
Date: Wed, 25 Aug 2021 21:41:33 -0400
Subject: [PATCH] exercise 05

---
 src/__tests__/05.js |  4 ++--
 src/exercise/05.js  | 36 +++++++++++++++---------------------
 2 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/__tests__/05.js b/src/__tests__/05.js
index 834a982b7..8b45ed321 100644
--- a/src/__tests__/05.js
+++ b/src/__tests__/05.js
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import {render} from '@testing-library/react'
-import App from '../final/05'
-// import App from '../exercise/05'
+// import App from '../final/05'
+import App from '../exercise/05'
 
 test('calls VanillaTilt.init with the root node', () => {
   const {container, unmount} = render(<App />)
diff --git a/src/exercise/05.js b/src/exercise/05.js
index 5e2162b66..508011dac 100644
--- a/src/exercise/05.js
+++ b/src/exercise/05.js
@@ -6,30 +6,24 @@ import * as React from 'react'
 import VanillaTilt from 'vanilla-tilt'
 
 function Tilt({children}) {
-  // 🐨 create a ref here with React.useRef()
+  const tiltRef = React.useRef();
 
-  // 🐨 add a `React.useEffect` callback here and use VanillaTilt to make your
-  // div look fancy.
-  // 💰 like this:
-  // const tiltNode = tiltRef.current
-  // VanillaTilt.init(tiltNode, {
-  //   max: 25,
-  //   speed: 400,
-  //   glare: true,
-  //   'max-glare': 0.5,
-  // })
-  //
-  // 💰 Don't forget to return a cleanup function. VanillaTilt.init will add an
-  // object to your DOM node to cleanup:
-  // `return () => tiltNode.vanillaTilt.destroy()`
-  //
-  // 💰 Don't forget to specify your effect's dependencies array! In our case
-  // we know that the tilt node will never change, so make it `[]`. Ask me about
-  // this for a more in depth explanation.
+  React.useEffect(() => {
+    const tiltNode = tiltRef.current;
+    VanillaTilt.init(tiltNode, {
+      max: 25,
+      speed: 400,
+      glare: true,
+      'max-glare': 0.5,
+    });
+    return () => tiltNode.vanillaTilt.destroy();
+  }, []);
 
-  // 🐨 add the `ref` prop to the `tilt-root` div here:
   return (
-    <div className="tilt-root">
+    <div
+      className="tilt-root"
+      ref={tiltRef}
+    >
       <div className="tilt-child">{children}</div>
     </div>
   )