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
33e0f50238