CODEWITHSUNDEEP
javascriptreactjs
dorkycam
dorkycam

Reputation: 529

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

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>

Upvotes: 11

Views: 96108

Answers (10)

Yagi91
Yagi91

Reputation: 53

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

Upvotes: 1

Sandra
Sandra

Reputation: 479

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>;

`

Upvotes: 6

Someone Anonymous
Someone Anonymous

Reputation: 417

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>

Upvotes: 1

davyCode
davyCode

Reputation: 459

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>
       );
    }
}

Upvotes: 10

Mudassir Kidwai
Mudassir Kidwai

Reputation: 57

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)}

Upvotes: 0

Saroar Hossain Shahan
Saroar Hossain Shahan

Reputation: 79

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>
    );
  }
}

Upvotes: 6

Kevin He
Kevin He

Reputation: 1250

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.

Upvotes: 14

Nishant Dixit
Nishant Dixit

Reputation: 5522

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);
}

  1. 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);
}

Upvotes: 2

Agney
Agney

Reputation: 19194

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>

Upvotes: 16

Danny Delott
Danny Delott

Reputation: 6988

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>

Upvotes: 0

Related Questions