如何使用onClick将数据从.map传输到href元素的功能

Question

I'm trying to move one element from .map to onClick function so that I can pass it to redux but I'm not sure how to proceed. This is my code

const Lists = lists.map((list, index) =>
    <li key={index}> {list.name} <a href="#" onClick={this.listInfo.bind(this)}>Learn More</a> </li> );

this is the function

listInfo(event){
  event.preventDefault();
  var el = list.name //this is where I want to save that value;
  console.log(el)
}

Thanks in advance

Answer 1

Try this....

const Lists = lists.map((list, index) =>
<li key={index}> {list.name} <a href="#" onClick={(e) => this.listInfo(e, list.name)}>Learn More</a> </li> );

And change your function to this...

listInfo(event, listName){
//.....
console.log(listName);
}