fix: the text for each Button now displays

Author: peterdanwan

trekbag/final-code/src/components/ButtonGroup.jsx

@@ -1,42 +1,41 @@
-import { useItemsStore } from "../stores/itemsStore";
-import Button from "./Button";
+import { useItemsStore } from '../stores/itemsStore';
+import Button from './Button';
 
 export default function ButtonGroup() {
   const markAllAsComplete = useItemsStore((state) => state.markAllAsComplete);
-  const markAllAsIncomplete = useItemsStore(
-    (state) => state.markAllAsIncomplete
-  );
+  const markAllAsIncomplete = useItemsStore((state) => state.markAllAsIncomplete);
   const resetToInitial = useItemsStore((state) => state.resetToInitial);
   const removeAllItems = useItemsStore((state) => state.removeAllItems);
 
   const secondaryButtons = [
     {
-      text: "Mark all as complete",
+      text: 'Mark all as complete',
       onClick: markAllAsComplete,
     },
     {
-      text: "Mark all as incomplete",
+      text: 'Mark all as incomplete',
       onClick: markAllAsIncomplete,
     },
     {
-      text: "Reset to initial",
+      text: 'Reset to initial',
       onClick: resetToInitial,
     },
     {
-      text: "Remove all items",
+      text: 'Remove all items',
       onClick: removeAllItems,
     },
   ];
 
   return (
-    <section className="button-group">
+    <section className='button-group'>
       {secondaryButtons.map((button) => (
         <Button
           key={button.text + button.onClick.toString()}
-          text={button.text}
           onClick={button.onClick}
-          buttonType="secondary"
-        />
+          buttonType='secondary'
+        >
+          {button.text}
+        </Button>
       ))}
     </section>
   );