I have an html page with:
I would like to listen to a "click event" of an html element from a react component.
Here, i need to get inside the "react-component" an event that will be triggered when we click on the "click" element.
<div id="click">button in static html</div>
<div id="react-component"></div> -> replace by a react component
Is there a way to achieve that? Thanks
onClick event handler on any html tag will work in react
You can still write normal JS code in react. Just add a useEffect(..., []) hook and bind your buttons onClick using standard JS code in there.
Here is the documentation for the JS onclick event: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick
A few methods for this.
One of which is using querySelector or getElementById like you would in vanilla JS.
So you can do this:
// HTML:
<div id="click">button in static html</div>
<div id="react-component"></div> -> replace by a react component
// JSX:
const myElement = document.getElementById("click");
myElement.onclick = () => {
...
};