Improve DX by passing to id to onToggle callback

stereobooster · May 30, 2019 · 37131d7 · 37131d7
1 parent 8edb4df
commit 37131d7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/src/App.js b/src/App.js
@@ -5,17 +5,22 @@ import { Accordion } from "./components/Accordion";
 import { AccordionSection } from "./components/AccordionSection";
 
 function App() {
-  const [expanded1, setExpanded1] = useState(false);
-  const [expanded2, setExpanded2] = useState(true);
+  const [expanded, setExpanded] = useState({ "2": true });
+  const toggle = id => {
+    setExpanded({
+      ...expanded,
+      [id]: !expanded[id]
+    });
+  };
 
   return (
     <div className={styles.Wrapper}>
       <Accordion>
         <AccordionSection
           title="section 1"
           id="1"
-          expanded={expanded1}
-          onToggle={() => setExpanded1(!expanded1)}
+          expanded={expanded["1"]}
+          onToggle={toggle}
         >
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius
@@ -32,8 +37,8 @@ function App() {
         <AccordionSection
           title="section 2"
           id="2"
-          expanded={expanded2}
-          onToggle={() => setExpanded2(!expanded2)}
+          expanded={expanded["2"]}
+          onToggle={toggle}
         >
           <p>
             <a href="/">test link</a>

diff --git a/src/components/AccordionSection.js b/src/components/AccordionSection.js
@@ -30,12 +30,12 @@ export const AccordionSection = ({
         id={labelId}
         tabIndex={0}
         className={styles.Label}
-        onClick={onToggle}
+        onClick={() => onToggle(id)}
         onKeyDown={e => {
           switch (e.key) {
             case " ":
             case "Enter":
-              onToggle();
+              onToggle(id);
               break;
             default:
           }