docs: Fix the example by using React hooks

component-driven · Apr 21, 2020 · d5edad2 · d5edad2
1 parent 33d4d3d
commit d5edad2
Showing 1 changed file with 13 additions and 12 deletions.
diff --git a/src/FocusWithin.md b/src/FocusWithin.md
@@ -135,13 +135,19 @@ const ref = React.createRef()
 ## Naïve focus trap implementation
 
 ```jsx
-const firstInput = React.createRef()
-initialState = {
-  enabled: false
-}
+import { useRef, useState, useEffect } from 'react'
+
+const firstInput = useRef(null)
+const [enabled, setEnabled] = useState(false)
+
+useEffect(() => {
+  if (enabled) {
+    firstInput.current.focus()
+  }
+}, [enabled])
 ;<FocusWithin
   onBlur={() => {
-    state.enabled && firstInput.current.focus()
+    enabled && firstInput.current.focus()
   }}
 >
   <fieldset>
@@ -154,15 +160,10 @@ initialState = {
     <button
       type="submit"
       onClick={() => {
-        setState({
-          enabled: !state.enabled
-        })
-        if (!state.enabled) {
-          firstInput.current.focus()
-        }
+        setEnabled(!enabled)
       }}
     >
-      {state.enabled ? 'Disable' : 'Enable'} focus trap
+      {enabled ? 'Disable' : 'Enable'} focus trap
     </button>
   </fieldset>
 </FocusWithin>