ArchCase

Design · Practice · Interview

Loading…

key={index} and other list-key mistakes

Reactmid

Main already had a simple CommentList with no interactivity. A colleague sent a PR adding a reply form under each comment and a separate Tabs component for navigation. QA complains: when a middle comment is deleted, the form text "teleports" to a neighbor. Find the cause in the diff.

PR: lesson.tsx +28 −03 проблем

1+import { useState } from 'react'

13 interface Comment {

24 id: string

35 author: string

46 text: string

7+ createdAt: number

58 }

710 interface Props {

811 comments: Comment[]

912 onDelete: (id: string) => void

1013 }

1114

15+function ReplyForm({ commentId }: { commentId: string }) {

16+ const [reply, setReply] = useState('')

17+ return (

18+ <input

19+ value={reply}

20+ onChange={(e) => setReply(e.target.value)}

21+ placeholder={`Reply to ${commentId}`}

22+ />

23+ )

24+}

25+

1226 export function CommentList({ comments, onDelete }: Props) {

1327 return (

1428 <div>

15- {comments.map((c) => (

16- <div key={c.id} className="comment">

29+ {comments.map((c, i) => (

30+ <div key={i} className="comment">

1731 <strong>{c.author}</strong>: {c.text}

1832 <button onClick={() => onDelete(c.id)}>Delete</button>

33+ <ReplyForm commentId={c.id} />

1934 </div>

2035 ))}

2136 </div>

2237 )

2338 }

39+

40+export function Tabs({ tabs }: { tabs: { title: string; content: string }[] }) {

41+ return (

42+ <div>

43+ {tabs.map((t) => (

44+ <div key={t.title}>

45+ <h3>{t.title}</h3>

46+ <p>{t.content}</p>

47+ </div>

48+ ))}

49+ </div>

50+ )

51+}

Шаг 1 из 5

How React keys work

React uses `key` to understand which list elements were kept, added, or removed. It's called reconciliation. With correct keys, React reuses DOM correctly and keeps local state in children. Main rule: **a key must be a stable unique identifier of a specific element**, not of its position. Think about what wrong keys look like and hunt for them in the code.