prop collections and getters

Author: erickcm2k

epic-react-kent-c-dodds/04-Advanced-React-Patterns/src/exercise/04.js

@@ -8,26 +8,41 @@ function useToggle() {
   const [on, setOn] = React.useState(false)
   const toggle = () => setOn(!on)
 
-  const togglerProps = {'aria-pressed': on, onClick: toggle}
+  function getTogglerProps({onClick, ...props} = {}) {
+    return {
+      'aria-pressed': on,
+      onClick: () => {
+        onClick && onClick()
+        toggle()
+      },
+      ...props,
+    }
+  }
+
   // 🐨 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, togglerProps}
+  return {on, toggle, getTogglerProps}
 }
 
 function App() {
-  const {on, togglerProps} = useToggle()
+  const {on, getTogglerProps} = useToggle()
   return (
     <div>
-      <Switch on={on} {...togglerProps} />
+      <Switch {...getTogglerProps({on})} />
       <hr />
-      <button aria-label="custom-button" {...togglerProps}>
+      <button
+        {...getTogglerProps({
+          'aria-label': 'custom-button',
+          onClick: () => console.info('onButtonClick'),
+          id: 'custom-button-id',
+        })}
+      >
         {on ? 'on' : 'off'}
       </button>
     </div>
   )
 }
-
 export default App
 
 /*

epic-react-kent-c-dodds/04-Advanced-React-Patterns/src/switch.js

@@ -23,8 +23,6 @@ class Switch extends React.Component {
       ...props
     } = this.props
 
-    console.log(this.props);
-
     const btnClassName = [
       className,
       'toggle-btn',