Me preguntaba si sería posible seleccionar siempre la identificación de los padres al hacer clic en cualquier parte de todo el div.
Hice un ejemplo de muestra que le da a cada niño divs una identificación y una consola diferentes. Registrando qué identificación de elemento se está seleccionando según la parte de la div completa en la que haga clic.
Como se dijo anteriormente, solo quiero poder seleccionar siempre la identificación del div principal, que en este caso es "1", sin importar en qué parte del div completo haga clic.
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>Busque el antepasado closest con la clase "contenedor".
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>