Selecting parent container id on Click

Question

I was wondering if it be possible to always select the parent's Id when clicking anywhere on the entire div?

I've made a sample example giving each child divs a different id and console.logging which element id is being selected depending on which part of the entire div you click on.

As said above I just want to be able to always select the parent div's Id, which in this case is "1" no matter which part of the entire div I click on.

function App() {
  function onClick(e) {
    console.log(e.target.id);
  }

  return (
    <div id="1" className="container" onClick={onClick}>
      Decor
      <div id="2" className="img-container">
        <img
          id="3"
          src="https://images.pexels.com/photos/7828323/pexels-photo-7828323.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
          className="img"
          alt=""
        />
      </div>
      <p id="4">Lorem ipsum</p>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

body {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  justify-content: center;
}

.container {
  height: 300px;
  width: 200px;
  border: solid green;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img-container {
  width: 200px;
  height: 200px;
}

img {
  width: 100%;
  height: 100%;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Though since your `onclick` is on the parent you can just use [currentTarget](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget). `console.log(e.currentTarget.id);` see: [How do I get the id of a button that was clicked? ReactJS](https://stackoverflow.com/questions/51846915/how-do-i-get-the-id-of-a-button-that-was-clicked-reactjs) — pilchard, Oct 17 '21 at 12:22

score 2 · Accepted Answer · answered Oct 17 '21 at 12:18

Search for the closest ancestor with the "container" class.

function Example() {

  function onClick(e) {
    const { id } = e.target.closest('.container');
    console.log(id);
  }

  return (
    <div id="1" className="container" onClick={onClick}>
      Decor
      <div id="2" className="img-container">
        <img
          id="3"
          src="https://images.pexels.com/photos/7828323/pexels-photo-7828323.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
          className="img"
          alt=""
        />
      </div>
      <p id="4">Lorem ipsum</p>
    </div>
  );
}

ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Selecting parent container id on Click

1 Answers1