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:
@@ -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>
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user