fix: Add fallback keys to taxonomy list rendering

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
This commit is contained in:
Dwindi Ramadhana
2025-12-30 17:06:58 +07:00
parent ca3dd4aff3
commit 33e0f50238
3 changed files with 6 additions and 6 deletions

View File

@@ -164,8 +164,8 @@ export default function ProductAttributes() {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{filteredAttributes.map((attribute) => ( {filteredAttributes.map((attribute, index) => (
<tr key={attribute.attribute_id} className="border-t hover:bg-muted/30"> <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 font-medium">{attribute.attribute_label}</td>
<td className="p-4 text-muted-foreground">{attribute.attribute_name}</td> <td className="p-4 text-muted-foreground">{attribute.attribute_name}</td>
<td className="p-4 text-sm capitalize">{attribute.attribute_type}</td> <td className="p-4 text-sm capitalize">{attribute.attribute_type}</td>

View File

@@ -155,8 +155,8 @@ export default function ProductCategories() {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{filteredCategories.map((category) => ( {filteredCategories.map((category, index) => (
<tr key={category.term_id} className="border-t hover:bg-muted/30"> <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 font-medium">{category.name}</td>
<td className="p-4 text-muted-foreground">{category.slug}</td> <td className="p-4 text-muted-foreground">{category.slug}</td>
<td className="p-4 text-sm text-muted-foreground"> <td className="p-4 text-sm text-muted-foreground">

View File

@@ -153,8 +153,8 @@ export default function ProductTags() {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{filteredTags.map((tag) => ( {filteredTags.map((tag, index) => (
<tr key={tag.term_id} className="border-t hover:bg-muted/30"> <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 font-medium">{tag.name}</td>
<td className="p-4 text-muted-foreground">{tag.slug}</td> <td className="p-4 text-muted-foreground">{tag.slug}</td>
<td className="p-4 text-sm text-muted-foreground"> <td className="p-4 text-sm text-muted-foreground">