Retrieve which button was clicked React/Material

Question

I have several dynamically generated material UI buttons, and when user clicks any of them I would like to know which was clicked (let's say obtain the value of name attribute which I assigned below). How can this be solved? Basically I want to retrieve some attribute of the button which was clicked. Here is some code

    {
      that.state.items.map(function (item) {
        return (
          <div key={item.id}>
            <FlatButton
              label={item.regionName}
              name={item.id}
              primary={true}
              onClick={that.handleRegionClick}
            ></FlatButton>
          </div>
        );
      });
    }
    
    handleRegionClick(e);
    {
      console.log(e.target.name); // This prints undefined
      // If I could get here the _item.id_ which I assigned to _name_ I would be fine.
    }

PS. I also have this in constructor

 this.handleRegionClick = this.handleRegionClick.bind(this);

Answer 1

Your question looks weird to me. You can simply do it.

<FlatButton label={item.regionName} name={item.id} primary={true} onClick={that.handleRegionClick.bind(this, item.id)}></FlatButton>

handleRegionClick(itemId){
  console.log(itemId)
}

Answer 2

You can do one thing, instead of assigning the id to name, bind that id with onClick handler function. Whenever any of the button will be clicked, it will pass that id to handler function.

Like this:

let a = [{ id: 1 }, { id: 2 }, { id: 3 }];

a.map(item => {

   return <FlatButton
    label={item.regionName}
    primary={true}
    onClick={() => this.handleRegionClick(item.id)} />

})

handleRegionClick function:

handleRegionClick(id){
  console.log(id);
}

Note: binding of handleRegionClick is not required here because here, we are using arrow function with onClick and calling handleRegionClick normally.