Как использовать ключи в React для удаления элемента?

Question

[Iliya V. Soldatkin]

Каким образом здесь обратиться к key, чтобы использовать его в функции удаления элемента?

Answer 1

[Алексей Уколов]

Во-первых, использовать порядковый номер в массиве в качестве key, особенно тогда, когда вы собираетесь этот массив изменять - плохая идея. Ключ должен быть жёстко привязан к конкретному элементу, индексы в массиве этого не обеспечивают.

Во-вторых, компонент CommentItem, вызывающий в какой-то момент переданную в него функцию removeItem(), должен в неё передавать тот самый идентификатор, по которому вы будете удалять элемент.

Примерный код:

{comments.map((comment) => (
  <CommentItem
    key={comment.id}
    id={comment.id}
    userName={comment.userName}
    commentText={comment.commentText}
    currentDate={comment.currentDate}
    currentTime={comment.currentTime}
    removeItem={removeCommentItem}
  />
)}

CommentItem = (id, removeItem) => {
   return (
    <button onClick={() => removeItem(id)}>Удалить</button>
  )
};

Comments

[Iliya V. Soldatkin]

Да-да, спасибо большое! Это решает вопрос. Я сделал так: removeItem={() => removeCommentItem(uuid(i))}