From 33e0f50238ff7b1798b8955be8203f11e792e4e4 Mon Sep 17 00:00:00 2001
From: Dwindi Ramadhana <dwindown@DwMacMiniM4.local>
Date: Tue, 30 Dec 2025 17:06:58 +0700
Subject: [PATCH] fix: Add fallback keys to taxonomy list rendering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Problem: React warning about missing keys persisted despite keys being present.
Root cause: term_id/attribute_id could be undefined during initial render before API response.

Solution: Add fallback keys using array index when primary ID is undefined:
- Categories: key={category.term_id || `category-${index}`}
- Tags: key={tag.term_id || `tag-${index}`}
- Attributes: key={attribute.attribute_id || `attribute-${index}`}

This ensures React always has a valid key, even during the brief moment
when data is loading or if the API returns malformed data.

Files Modified:
- admin-spa/src/routes/Products/Categories.tsx
- admin-spa/src/routes/Products/Tags.tsx
- admin-spa/src/routes/Products/Attributes.tsx

Result:
✅ React key warnings should be resolved
✅ Graceful handling of edge cases where IDs might be missing
---
 admin-spa/src/routes/Products/Attributes.tsx | 4 ++--
 admin-spa/src/routes/Products/Categories.tsx | 4 ++--
 admin-spa/src/routes/Products/Tags.tsx       | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/admin-spa/src/routes/Products/Attributes.tsx b/admin-spa/src/routes/Products/Attributes.tsx
index 5046c99..6b8683f 100644
--- a/admin-spa/src/routes/Products/Attributes.tsx
+++ b/admin-spa/src/routes/Products/Attributes.tsx
@@ -164,8 +164,8 @@ export default function ProductAttributes() {
               </tr>
             </thead>
             <tbody>
-              {filteredAttributes.map((attribute) => (
-                <tr key={attribute.attribute_id} className="border-t hover:bg-muted/30">
+              {filteredAttributes.map((attribute, index) => (
+                <tr key={attribute.attribute_id || `attribute-${index}`} className="border-t hover:bg-muted/30">
                   <td className="p-4 font-medium">{attribute.attribute_label}</td>
                   <td className="p-4 text-muted-foreground">{attribute.attribute_name}</td>
                   <td className="p-4 text-sm capitalize">{attribute.attribute_type}</td>
diff --git a/admin-spa/src/routes/Products/Categories.tsx b/admin-spa/src/routes/Products/Categories.tsx
index 7df087b..a2570ec 100644
--- a/admin-spa/src/routes/Products/Categories.tsx
+++ b/admin-spa/src/routes/Products/Categories.tsx
@@ -155,8 +155,8 @@ export default function ProductCategories() {
               </tr>
             </thead>
             <tbody>
-              {filteredCategories.map((category) => (
-                <tr key={category.term_id} className="border-t hover:bg-muted/30">
+              {filteredCategories.map((category, index) => (
+                <tr key={category.term_id || `category-${index}`} className="border-t hover:bg-muted/30">
                   <td className="p-4 font-medium">{category.name}</td>
                   <td className="p-4 text-muted-foreground">{category.slug}</td>
                   <td className="p-4 text-sm text-muted-foreground">
diff --git a/admin-spa/src/routes/Products/Tags.tsx b/admin-spa/src/routes/Products/Tags.tsx
index f576c66..d9435ff 100644
--- a/admin-spa/src/routes/Products/Tags.tsx
+++ b/admin-spa/src/routes/Products/Tags.tsx
@@ -153,8 +153,8 @@ export default function ProductTags() {
               </tr>
             </thead>
             <tbody>
-              {filteredTags.map((tag) => (
-                <tr key={tag.term_id} className="border-t hover:bg-muted/30">
+              {filteredTags.map((tag, index) => (
+                <tr key={tag.term_id || `tag-${index}`} className="border-t hover:bg-muted/30">
                   <td className="p-4 font-medium">{tag.name}</td>
                   <td className="p-4 text-muted-foreground">{tag.slug}</td>
                   <td className="p-4 text-sm text-muted-foreground">