Complete exercise 4

src/exercise/04.extra-1.js

@@ -0,0 +1,46 @@
+// Prop Collections and Getters
+// http://localhost:3000/isolated/exercise/04.js
+
+import * as React from 'react'
+import {Switch} from '../switch'
+
+function useToggle() {
+  const [on, setOn] = React.useState(false)
+  const toggle = () => setOn(!on)
+
+  const getTogglerProps = ({onClick, ...props} = {}) => ({
+    'aria-pressed': on,
+    onClick: () => {
+      onClick?.()
+      toggle()
+    },
+    ...props,
+  })
+  return {on, toggle, getTogglerProps}
+}
+
+function App() {
+  const {on, getTogglerProps} = useToggle()
+  return (
+    <div>
+      <Switch {...getTogglerProps({on})} />
+      <hr />
+      <button
+        {...getTogglerProps({
+          'aria-label': 'custom-button',
+          onClick: () => console.info('onButtonClick'),
+          id: 'custom-button-id',
+        })}
+      >
+        {on ? 'on' : 'off'}
+      </button>
+    </div>
+  )
+}
+
+export default App
+
+/*
+eslint
+  no-unused-vars: "off",
+*/

src/exercise/04.js

@@ -8,10 +8,8 @@ function useToggle() {
   const [on, setOn] = React.useState(false)
   const toggle = () => setOn(!on)
 
-  // 🐨 Add a property called `togglerProps`. It should be an object that has
-  // `aria-pressed` and `onClick` properties.
-  // 💰 {'aria-pressed': on, onClick: toggle}
-  return {on, toggle}
+  const togglerProps = {'aria-pressed': on, onClick: toggle}
+  return {on, toggle, togglerProps}
 }
 
 function App() {