Retrieve element's key in React

Question

In a React component I've created, I have this inside the render method return value:

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

If I didn't specify a key, React warned me to do so. So I did. I then specified onClick event handler:

getTracks: function (e) {
   console.log(e.target.key);
},

in hope I can get the <div> key attribute I created. This does not work, however (I get some HTML output for e.target but nothing for e.target.key). How can I get the key attribute off an element that I've clicked on?

Answer 1

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.