chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-07-29 12:53:20 -07:00
parent 482ea9b04c
commit 6a990ef56e
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/layout/Canvas/components/Widget.jsx
+2 -2
View File
@@ -1,13 +1,13 @@
import { useSlotRecipe, chakra, Flex, CloseButton, Text } from "@chakra-ui/react" import { useSlotRecipe, chakra, Flex, CloseButton, Text } from "@chakra-ui/react"
export default function Widget({ id, title, isEditable, isDelete, DeleteWidget }) { export default function Widget({ id, title, isEditable, isDelete, DeleteWidget }) {
console.log("rendering widget"); // console.log("rendering widget");
const recipe = useSlotRecipe({ key: "widget" }); const recipe = useSlotRecipe({ key: "widget" });
const styles = recipe(); const styles = recipe();
return ( return (
<> <>
{console.log("This widgets id is: ", id)} {/* {console.log("This widgets id is: ", id)} */}
<chakra.div css={styles.header} cursor={isEditable ? "move":"default"}> <chakra.div css={styles.header} cursor={isEditable ? "move":"default"}>
{isDelete ? ( {isDelete ? (
<> <>
client/src/components/layout/Sidebar/Sidebar.jsx
+5 -5
View File
@@ -34,9 +34,8 @@ export default function Sidebar({ view, onChangeView }) {
// Track currrent view from both Sidebar and Canvas when 'view' changes // Track currrent view from both Sidebar and Canvas when 'view' changes
useEffect(() => { useEffect(() => {
console.log("typeof view =", typeof view); // console.log("typeof view =", typeof view);
console.log("Current view = ", view); console.log("Current view = ", view);
// const dashboardViews = ["widget", "gas", "seismic", "remote", "daily"];
const newIndex = buttons.findIndex((btn) => { const newIndex = buttons.findIndex((btn) => {
if (btn.view === "widget") { if (btn.view === "widget") {
@@ -52,6 +51,7 @@ export default function Sidebar({ view, onChangeView }) {
return ( return (
<Box <Box
// key={button.name}
css={styles.root} css={styles.root}
width={isOpen ? "210px" : "71px"} width={isOpen ? "210px" : "71px"}
transition="width 0.4s ease" transition="width 0.4s ease"
@@ -70,12 +70,12 @@ export default function Sidebar({ view, onChangeView }) {
{buttons.map((button, idx) => { {buttons.map((button, idx) => {
const Icon = button.icon; const Icon = button.icon;
return ( return (
<Tooltip tooltipkeykey={idx} content={button.name} sidebarIsOpen={isOpen}> <Tooltip key={button.name} tooltipkeykey={idx} content={button.name} sidebarIsOpen={isOpen}>
<Button <Button
key={idx} key={button.name}
css={styles.buttons} css={styles.buttons}
onClick={() => { onClick={() => {
setActiveButton(idx); // setActiveButton(idx);
onChangeView(button.view); // Trigger state change in Dashboard onChangeView(button.view); // Trigger state change in Dashboard
}} }}
bg={activeButton === idx ? "primary":undefined} bg={activeButton === idx ? "primary":undefined}