CODEWITHSUNDEEP
reactjs
daremkd
daremkd

Reputation: 8424

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?

Upvotes: 18

Views: 38647

Answers (2)

B4BIPIN
B4BIPIN

Reputation: 353

The key is for React's internal use and won't display in the HTML and Console, you just have to use the id to retrieve that unique component. eg:

getTracks: function (e) {
   console.log(e.target.id?e.target.id:e.target);
}

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

And also you don't need to pass value to the key attribute.Value is completely optional.

Upvotes: 0

Nathan Hagen
Nathan Hagen

Reputation: 12780

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.

Upvotes: 29

Related Questions