How to Get the id of the element on Click in React

Do you want to get the id of the element when the user click on the button ? If yes then this post is for you. In this tutorial you will know how to get the id of the element on click in react.

Get the id of the element on Click in React

Lets know all the steps to get the id of the element on click in react.

Step 1: Create a click event listener function

The first step is to create a function that will handle click of the button. Lets name it handleClick. Its return type is void.

Use the below lines of code to create handleClick function.

 const handleClick = event => {
    console.log(event.currentTarget.id);
  };

The above code will print the id of the button when the user click on it.

Step 2 : Create a button

You can create a button in the same way you create in HTML . Its id is myBtn.

<button id="myBtn">
  Click Me
</button>

Step 3: Call the onClick prop

Now the next step is to set the onClick prop on the button. It will call the handleClick function when any user click on it.

Now the above button part code is like below.

<button id="myBtn" onClick={handleClick}>
  Click Me
</button>

Full Code

const App = () => {
  const handleClick = event => {
    console.log(event.currentTarget.id);
  };
  return (
    <div>
      <button id="myBtn" onClick={handleClick}>
        Click Me
      </button>
    </div>
  );
};

export default App;

Now most of the coder also uses the “target “property on the event instead of “currentTarget”. The main difference between them is that currentTarget property gives you access to the element of the button. But when you use the target property it gives reference to the element.

Other Methods to Get the id of the element on Click in React

Use the useRef() hook with ref on id.

You can also use the hook to get the if of the element. You will use the following steps.

Step 1: Define the useRef() hook to create ref object.

Step 2: After that set the ref prop on the button element.

Step 3: Then use the onClick prop on the element.

Step 4: Now access the id of the button element using the ref.current.id.

Below is the full code of the above steps.

import {useRef} from 'react';

const App = () => {
  const ref = useRef(null);

  const handleClick = event => {
    // console.log(event.currentTarget.id);

    console.log(ref.current.id);
  };

  return (
    <div>
      <button ref={ref} id="mBtn" onClick={handleClick}>
        Click
      </button>
    </div>
  );
};

export default App;

Once you have find the id of the element using the ref prop, you can reuse the id of the button element to another button like below.

<button ref={myRef}>

Conclusion

In this post you have known all the steps to get the id of the element using the currentTaget and target property. Also learned how you can reuse the id of a particular element in another element using the ref props.