exercise 05

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 />)

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>
   )