How do I get the id of a button that was clicked? ReactJS

Question

I was wondering how I would go about getting the id (becuase it is unknown) of a button that is clicked. So when the button is clicked, I know what the id of that specific button is. There are lots of buttons on the page and I would like to know which button is pressed (they all have unique id's). Currently the buttons look like this:

  <button key={uuidv4()} id={this.props.keyword} value={this.props.keyword} onClick={this.props.onClick} className="removeButton">Remove</button>

Answer 1

Well if the elements are nested event.target won't always work since it refers to the target that triggers the event in the first place. See this link for the usage of event.currentTarget, which always refer to the element that the handler is bound to.

Another way to grab hold of the element and its attributes is to use React refs. This is more general when trying to get the DOM element in React.

Answer 2

You can use event.target.id to get the ID of button clicked

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(event) {
    const id = event.target.id;
    console.log(id);
  }
  render() {
    return (
      <button id="unique-id" onClick={this.handleClick}>Button</button>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 3

I know this has already been answered but i was working with react and faced similar issue, lost 2 hours trying to figure out why event.target.id was sometimes null or an empty string

this solved it for me:

class Button extends React.Component {

    getButtonId = (e) => {
      console.log(e.currentTarget.id);
    }

    render() {
       return (
          <button id="yourID" onClick={this.getButtonId}>Button</button>
       );
    }
}

Answer 4

You can use either event.target.[selector goes here] or event.currentTarget.[selector goes here] to solve your issue. See example code below.

class Button extends React.Component {

  handleId = (e) => {
    console.log(e.target.id);
    console.log(e.currentTarget.id);
  }

  render() {
    return (
      <button id="yourID" onClick={this.handleId}>Button</button>
    );
  }
}

Answer 5

The very convenient way (not only for buttons but for list of elements) to do this is using custom attribute data-someName of DOM element and then reach it via event.currentTarget.dataset.someName

const openCard = (event) => {
  console.log('event.currentTarget.dataset.id', event.currentTarget.dataset.id); // >> id
  //do more actions with id
};

<Card onClick={openCard} data-id={item.id}>
  <CardContent />
</Card>;

`

Answer 6

There is several way to do this

1. With manipulating onClick function

 <button key={uuidv4()} id={this.props.keyword} value={this.props.keyword} onClick={(e)=>this.props.onClick(e,this.props.keyword)} className="removeButton">Remove</button>
    
onClick = (e,id) =>{
    console.log(id);
}

2. Without manipulating onClick function

<button key={uuidv4()} id={this.props.keyword} value={this.props.keyword} onClick={this.props.onClick} className="removeButton">Remove</button>

onClick = (e) =>{
  const id = e.target.getAttribute("id");
  console.log(id);
}

Answer 7

You can do this:

function getId(id) {
  console.log(id);
}

<button key={uuidv4()} id={this.props.keyword} value={this.props.keyword} onClick="getId(this.id)" className="removeButton">Remove</button>

Answer 8

if the function to handle the event is in the same component it is best to use the event.target.id, this will have its limitations when you try accessing a DOM element nested as a child component as event.target.id. Use event.currentTarget.id is nested,

This happens because event.currentTarget can identify the element that caused the event deep down from the child as it burbles out, while event.target.id will set the target as the child component and will not be able to identify the child component that has that element since it target does not change and hence faulty.

You can watch this youtube video to understand better. also read from their differences

Answer 9

Your onClick handler should receive the click event, which should include the id: event.target.id.

<button
  key={uuidv4()}
  id={this.props.keyword}
  value={this.props.keyword}
  onClick={(event) => /* you want to use event.target.id */}
  className="removeButton">Remove</button>

Answer 10

This worked for me:

functionName = (event) => {
    const id = event.target.id;
    const value = event.target.value;
    console.log("Value of the button: ", value)
    console.log("Id of the button: ", id)}