fix: resolve React key warning in PhaseProgressIndicator
- Add explicit key to overflow count span that shows "+N" when more than 10 subtasks exist (sibling to mapped elements needed a key) - Add fallback key using index for subtask indicators in case subtask.id is undefined Fixes console warning: "Each child in a list should have a unique 'key' prop" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -155,7 +155,7 @@ export function PhaseProgressIndicator({
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
{subtasks.slice(0, 10).map((subtask, index) => (
|
||||
<motion.div
|
||||
key={subtask.id}
|
||||
key={subtask.id || `subtask-${index}`}
|
||||
className={cn(
|
||||
'h-2 w-2 rounded-full',
|
||||
subtask.status === 'completed' && 'bg-success',
|
||||
@@ -185,7 +185,7 @@ export function PhaseProgressIndicator({
|
||||
/>
|
||||
))}
|
||||
{totalSubtasks > 10 && (
|
||||
<span className="text-[10px] text-muted-foreground font-medium ml-0.5">
|
||||
<span key="overflow-count" className="text-[10px] text-muted-foreground font-medium ml-0.5">
|
||||
+{totalSubtasks - 10}
|
||||
</span>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user