Retrieve element's key in React

The best way to get the key attribute value that you set is to just pass it as another attribute as well that has meaning. For example, I often do this:

const userListItems = users.map(user => {
  return <UserListItem
    key={ user.id }
    id={ user.id }
    name={ user.name }
  });

or in your case:

this.props.albums.map(function(albumDetails) {
  return (<div className="artistDetail" key={albumDetails.id} data-id={ albumDetails.id } onClick={component.getTracks}>
      <img src={albumDetails.imageSrc} />
      <p><a href="#" >{albumDetails.name}</a></p>
  </div>)

It seems redundant, but I think its more explicit because key is a purely react implementation concept, which could mean something different than id, even though I almost always use unique IDs as my key values. If you want to have id when you reference the object, just pass it in.

Tags:

Reactjs