From 6a990ef56e5400d6accbf568fff51e169682b2b8 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Tue, 29 Jul 2025 12:53:20 -0700
Subject: [PATCH] Fix button.map warning inside Sidebar.jsx 'each child in a
 list should hae a unique key prop'. Pass 'key' parameter in top level Tooltip
 inside map function

---
 .../src/components/layout/Canvas/components/Widget.jsx |  4 ++--
 client/src/components/layout/Sidebar/Sidebar.jsx       | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/src/components/layout/Canvas/components/Widget.jsx b/client/src/components/layout/Canvas/components/Widget.jsx
index 314924f..74b1b71 100644
--- a/client/src/components/layout/Canvas/components/Widget.jsx
+++ b/client/src/components/layout/Canvas/components/Widget.jsx
@@ -1,13 +1,13 @@
 import { useSlotRecipe, chakra, Flex, CloseButton, Text } from "@chakra-ui/react"
 
 export default function Widget({ id, title, isEditable, isDelete, DeleteWidget }) {
-  console.log("rendering widget");
+  // console.log("rendering widget");
   const recipe = useSlotRecipe({ key: "widget" });
   const styles = recipe();
 
   return (
     <>
-      {console.log("This widgets id is: ", id)}
+      {/* {console.log("This widgets id is: ", id)} */}
       <chakra.div css={styles.header} cursor={isEditable ? "move":"default"}>
         {isDelete ? (
           <>
diff --git a/client/src/components/layout/Sidebar/Sidebar.jsx b/client/src/components/layout/Sidebar/Sidebar.jsx
index 7cff5a5..89616be 100644
--- a/client/src/components/layout/Sidebar/Sidebar.jsx
+++ b/client/src/components/layout/Sidebar/Sidebar.jsx
@@ -34,9 +34,8 @@ export default function Sidebar({ view, onChangeView }) {
 
   // Track currrent view from both Sidebar and Canvas when 'view' changes
   useEffect(() => {
-    console.log("typeof view =", typeof view);
+    // console.log("typeof view =", typeof view);
     console.log("Current view = ", view);
-    // const dashboardViews = ["widget", "gas", "seismic", "remote", "daily"];
 
     const newIndex = buttons.findIndex((btn) => {
       if (btn.view === "widget") {
@@ -52,6 +51,7 @@ export default function Sidebar({ view, onChangeView }) {
 
   return (
     <Box
+      // key={button.name}
       css={styles.root}
       width={isOpen ? "210px" : "71px"}
       transition="width 0.4s ease"
@@ -70,12 +70,12 @@ export default function Sidebar({ view, onChangeView }) {
       {buttons.map((button, idx) => {
         const Icon = button.icon;
         return (
-          <Tooltip tooltipkeykey={idx} content={button.name} sidebarIsOpen={isOpen}>
+          <Tooltip key={button.name} tooltipkeykey={idx} content={button.name} sidebarIsOpen={isOpen}>
             <Button 
-              key={idx} 
+              key={button.name} 
               css={styles.buttons} 
               onClick={() => {
-                setActiveButton(idx);
+                // setActiveButton(idx);
                 onChangeView(button.view); // Trigger state change in Dashboard
               }} 
               bg={activeButton === idx ? "primary":undefined}