I have a dashboard layout (Syncfusion) and a menu that allows users to update/delete/add new panels. I want to grab the ID of whatever element the mouse is hovering over so that my context menu can offer the appropriate operations (some elements cant be edited etc) What is the best way to handle this in React?
You can use onMouseOver with react. On each element you'd pass a function that runs and get the element ID.
the function would be
const Example = (props) => {
const handleOnMouseOver = (event) => {
const element_id = event.target.id;
console.log(element_id);
};
return (
<div>
<p onMouseOver={handleOnMouseOver} id="id-element-one">
Element one
</p>
<p onMouseOver={handleOnMouseOver} id="id-element-two">
Element two
</p>
<p onMouseOver={handleOnMouseOver} id="id-element-three">
Element three
</p>
<p onMouseOver={handleOnMouseOver} id="id-element-four">
Element four
</p>
</div>
);
};
// Render it
ReactDOM.render(<Example />, document.getElementById("root"));<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>