Как из самого React компонента получить key?

Question

То-есть у нас есть React component, где-то его вызвали, а внутри самого компоенета мы получили ключ

Например

<Item key={3}>

const Item = ({key}) => {
 return <>{key}</>

}

Answer 1

Сам key в компонент не передается. Это "маркер" для React, чтобы он понимал, где произошли изменения, например, если компоненты созданы динамически с помощью map.

Если Вам нужно это значение в дочернем компоненте, явно его передайте в пропс:

<Item key={3} id={3}>
const Item = ({id}) => <>{id}</>

Answer 2

Key не берется из воздуха, его можно взять, например из массива данных, если получаешь массив объектов то возможно в каждом объекте будет уникальный id или uuid, его можно использовать как key.

const users = [
  {
    uuid: "ld4snajkfd4s",
    name: "Dmitriy"
  },
  {
    uuid: "ed74d2cv2d1d",
    name: "Alexandr"
  },
]

return (
  {users.map((user) => <div key={user.id}>{user.name}</div>)}
)

На самый крайний случай можно использовать порядковый номер элемента из метода array.map, но тут есть свои нюансы

const users = [
  {
    name: "Dmitriy"
  },
  {
    name: "Alexandr"
  },
]

return (
  {users.map((user, i) => <div key={i}>{user.name}</div>)}
)

PS: лучше читать первоисточники - https://react.dev/learn/rendering-lists, если нет времени, то можно посмотреть видео, тут за одну минуту все рассказывают - https://www.youtube.com/shorts/1T-az_gGAy4

БЛОГ НА HUSL

Как из самого React компонента получить key?

Ответы (2 шт):