I wrote the below code to capture the id for the div, when the user hovers over the div.
<div className="part-3" id="graph-1" onMouseEnter={handleHover}>
<h3 className="chartHeader">Avg. marks per subject </h3>
{<MarksDisplayTable/>}
</div>
My handleHover function looks as below –
const handleHover = (event) => {
console.dir("event = " + Object.keys(event));
}
I was expecting that the target key will contain id for the div. But, it only consists of 2 private keys.
Output –
event = __reactFiber$593cb2h2ba,__reactProps$593cb2h2ba
How can I capture the id = graph-1 using onMouseEnter action ?
To capture the id of a div when the user hovers over it using the onMouseEnter event in React, you can access the target property of the event object. The target property will give you the DOM element that triggered the event, and from there you can access its attributes, including id.
Here is how you can get the id.
function App() {
const handleHover = (event) => {
const target = event.currentTarget;
const id = target.id;
console.log("id:", id);
};
return (
<div className='App'>
<div className="part-3" id="graph-1" onMouseEnter={handleHover}>
<h3 className="chartHeader">Avg. marks per subject</h3>
</div>
</div>
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>In this scenario, you could have used event.target instead of event.currentTarget. However, to reliably capture the id when the user hovers over the div, you should use event.currentTarget because event.currentTarget always refers to the element to which the event handler is attached.
In your case, it consistently refers to the div element with the onMouseEnter event listener, whereas event.target refers to the element that actually triggered the event. If the user hovers over a child element inside the div (like an <h3> element), event.target would point to that specific child element.
1
you can use event.currentTarget.id. In case you wondering whether to use currentTarget or target, the current target will catch the parent <div> regardless you hover over its children. Target will catch the children if you hover over the children.
function App(){
const handleHover = (event) => {
const { id } = event.currentTarget
console.log(event.currentTarget)
console.log(event.target)
console.log(id)
}
return (
<div className="part-3" id="graph-1" onMouseEnter={handleHover}>
<h3 className="chartHeader">Avg. marks per subject </h3>
<span>Something</span>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("app"));<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="app"></div>1
const { useRef } = React;
const Example = () => {
const divRef = useRef(null);
const handleHover = () => {
console.log(divRef.current.id)
}
return (
<div ref={divRef} id="im-the-id-you-are-looking-for" onMouseEnter={handleHover}>
give me the id!!
</div>
);
};
ReactDOM.createRoot(
document.getElementById("root")
).render(
<Example />
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<div id="root"></div>you can also use a useRef…
1