Get the id of the element on Click in React

# Table of Contents

1. Get the id of the element on Click in React
2. Get the id of the element on Click using a ref

# Get the id of the element on Click in React

To get the id of the element on click in React:

1. Set the onClick prop on the element to a function.
2. Access the id of the element on the currentTarget property of the event.
3. For example, event.currentTarget.id returns the element's id.

Copied!
const App = () => {
  const handleClick = event => {
    console.log(event.currentTarget.id);
  };
  return (
    <div>
      <button id="my-btn" onClick={handleClick}>
        Click
      </button>
    </div>
  );
};

export default App;

We set the onClick prop on the button element, so every time the element is clicked, the handleClick function is invoked.

Copied!
<button id="my-btn" onClick={handleClick}>
  Click
</button>

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

The currentTarget property on the event gives us access to the element that the event listener is attached to.

Whereas the target property on the event gives us a reference to the element that triggered the event (could be a descendant).

You can access the button element as event.currentTarget and access any of its properties.

Alternatively, you can set the ref prop on the element and get its id using the ref object.

# Get the id of the element on Click using a ref

To get the id of an element on click using a ref:

1. Use the useRef hook to create a ref object.
2. Set the ref prop on the element.
3. Set the onClick prop on the element.
4. Access the id of the element as ref.current.id.

Copied!
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="my-btn" onClick={handleClick}>
        Click
      </button>
    </div>
  );
};

export default App;

The useRef() hook can be passed an initial value as an argument.

Copied!
const ref = useRef(null);

The hook returns a mutable ref object whose .current property is initialized to the passed argument.

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

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

When we pass a ref prop to an element, e.g. <button ref={myRef}>, React sets the .current property of the ref object to the corresponding DOM node.