text: 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?
  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.