fix: set unique jsx keys

Signed-off-by: rare-magma <rare-magma@posteo.eu>
rare-magma · Dec 9, 2023 · bad4b5e · bad4b5e
1 parent 795c1de
commit bad4b5e
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 18 deletions.
diff --git a/src/components/Budget/BudgetPage.tsx b/src/components/Budget/BudgetPage.tsx
@@ -424,10 +424,11 @@ export function BudgetPage() {
         position={"bottom-center"}
         style={{ zIndex: 100 }}
       >
-        {notifications.map((notification) => {
+        {notifications.map((notification, i) => {
           return (
             notification && (
               <Notification
+                key={i}
                 notification={notification}
                 onShow={() =>
                   setNotifications(
@@ -479,12 +480,12 @@ export function BudgetPage() {
       )}
 
       {showCards && (
-        <Container key={`${budget.id}-${needReload}`}>
+        <Container key={`${budget.id}-${needReload}-cards-container`}>
           <Row className="mt-1">
             <Col md="6">
               <div className="card-columns">
                 <StatCard
-                  key={budget?.expenses.total + budget?.incomes.total}
+                  key={`${budget?.expenses.total} + ${budget?.incomes.total}-${budget.id}-stat-card`}
                   onShowGraphs={() => setShowGraphs(true)}
                 />
 

diff --git a/src/components/CalculateButton/CalculateButton.tsx b/src/components/CalculateButton/CalculateButton.tsx
@@ -50,7 +50,7 @@ export function CalculateButton({
     <>
       <OverlayTrigger
         trigger="click"
-        key="top"
+        key={`${itemForm.id}-${label}-calculate-button-overlay-trigger`}
         placement="top"
         rootClose={true}
         overlay={
@@ -59,7 +59,7 @@ export function CalculateButton({
               <InputGroup
                 size="sm"
                 className="mb-1"
-                key={`${itemForm.id}-operation-group`}
+                key={`${itemForm.id}-${label}-operation-group`}
               >
                 <Dropdown>
                   <Dropdown.Toggle
@@ -103,7 +103,7 @@ export function CalculateButton({
                 </Dropdown>
                 <CurrencyInput
                   id={`${label}-${itemForm.id}-operation-value`}
-                  key={`item-${itemForm.id}-operation-value`}
+                  key={`item-${itemForm.id}-${label}-operation-value`}
                   className="text-end form-control straight-corners fixed-width-font"
                   aria-label={`${operation}`}
                   name="item-operate-value"
@@ -119,7 +119,7 @@ export function CalculateButton({
                 />
                 <Button
                   id={`item-${itemForm.id}-trigger-operation-button`}
-                  key={`${itemForm.id}-trigger-operation-button`}
+                  key={`${itemForm.id}-${label}-trigger-operation-button`}
                   aria-label={"apply change to item value"}
                   variant="outline-secondary"
                   type="button"
@@ -137,7 +137,7 @@ export function CalculateButton({
       >
         <Button
           id={`${label}-${itemForm.id}-operate-button`}
-          key={`${itemForm.id}-operate-button`}
+          key={`${itemForm.id}-${label}-operate-button`}
           aria-label={"select operation type to item value"}
           aria-haspopup="dialog"
           variant="outline-secondary"

diff --git a/src/components/ItemForm/ItemFormGroup.tsx b/src/components/ItemForm/ItemFormGroup.tsx
@@ -72,14 +72,18 @@ export function ItemFormGroup({
   }
 
   return (
-    <InputGroup size="sm" className="mb-1" key={`${itemForm.id}-group`}>
+    <InputGroup
+      size="sm"
+      className="mb-1"
+      key={`${itemForm.id}-${label}-group`}
+    >
       <OverlayTrigger
         delay={250}
         placement="top"
         overlay={
           costPercentage > 0 ? (
             <Tooltip
-              id={`tooltip-value-${itemForm.id}`}
+              id={`tooltip-value-${label}-${itemForm.id}`}
               style={{ position: "fixed" }}
             >
               {costPercentage}% of revenue
@@ -92,7 +96,7 @@ export function ItemFormGroup({
         <Form.Control
           id={`${label}-${itemForm.id}-name`}
           aria-label={`item ${itemForm.id} name`}
-          key={`${itemForm.id}-name`}
+          key={`${itemForm.id}-${label}-name`}
           className="w-25"
           ref={inputRef}
           defaultValue={itemForm.name}
@@ -109,7 +113,7 @@ export function ItemFormGroup({
         overlay={
           costPercentage > 0 ? (
             <Tooltip
-              id={`tooltip-value-${itemForm.id}`}
+              id={`tooltip-costPercentage-${label}-${itemForm.id}`}
               style={{ position: "fixed" }}
             >
               {costPercentage}% of revenue
@@ -121,7 +125,7 @@ export function ItemFormGroup({
       >
         <CurrencyInput
           id={`${label}-${itemForm.id}-value`}
-          key={`${itemForm.id}"-value-${changed}`}
+          key={`${itemForm.id}-${label}-value-${changed}`}
           className="text-end form-control straight-corners fixed-width-font"
           aria-label={`item ${itemForm.id} value`}
           name="item-value"
@@ -143,7 +147,6 @@ export function ItemFormGroup({
       />
       <OverlayTrigger
         trigger="click"
-        key="top"
         placement="top"
         rootClose={true}
         overlay={
@@ -164,7 +167,7 @@ export function ItemFormGroup({
                 <Button
                   id={`item-${itemForm.id}-delete-confirmation-button`}
                   aria-label={`confirm item ${itemForm.id} deletion`}
-                  key={`${itemForm.id}-delete-confirmation-button`}
+                  key={`${itemForm.id}-${label}-delete-confirmation-button`}
                   variant="delete"
                   type="button"
                   size="sm"
@@ -181,7 +184,7 @@ export function ItemFormGroup({
         <Button
           id={`delete-${label}-${itemForm.id}-button`}
           aria-label={`delete item ${itemForm.id}`}
-          key={`${itemForm.id}-button`}
+          key={`${itemForm.id}-${label}-delete-button`}
           variant="delete"
           type="button"
           onClick={() => {

diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
@@ -279,6 +279,7 @@ export function NavBar({
                   }
                 >
                   <Form.Control
+                    id="budget-name"
                     aria-label={"budget name"}
                     key={"budget-name-key-" + budget.id}
                     defaultValue={budget.name}

diff --git a/src/components/StatCard/StatCard.tsx b/src/components/StatCard/StatCard.tsx
@@ -279,6 +279,7 @@ export function StatCard({ onShowGraphs }: StatCardProps) {
             </Button>
           </OverlayTrigger>
           <Form.Control
+            id="goal-input"
             data-testid="goal-input"
             className="text-end fixed-width-font"
             aria-label={"goal"}
@@ -336,7 +337,7 @@ export function StatCard({ onShowGraphs }: StatCardProps) {
           </OverlayTrigger>
           <CurrencyInput
             id="reserves"
-            key={"reserves"}
+            key={"reserves-input"}
             className="text-end form-control fixed-width-font"
             aria-label={"reserves"}
             name="reserves"

diff --git a/src/components/TableCard/TableCard.tsx b/src/components/TableCard/TableCard.tsx
@@ -188,7 +188,7 @@ export function TableCard({ header: label }: TableCardProps) {
       <Card.Body>
         {table?.items?.map((item: ItemForm) => (
           <ItemFormGroup
-            key={`${label}-${item.id}`}
+            key={`${label}-${item.id}-item-form-group`}
             itemForm={item}
             label={label}
             costPercentage={