daremkd February 2016

Retrieve element's key in React

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?

Answers


Nathan Hagen February 2016

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.

Post Status

Asked in February 2016
Viewed 3,661 times
Voted 7
Answered 1 times

Search




Leave an answer