Handle double click in React?

In this article, we will learn how to handle double-click events in React.

React is the most popular JavaScript framework/library out there and this popularity is because of the fact that it is easy to learn and has declarative APIs that help to write HTML as JavaScript.

Javascript as XML (JSX) that we often use comes with the synthetic events that React internally converts to the DOM events during the rendering.

JSX comes with the onDoubleClick that we can use to listen to the double click. It is synthetic wrapper over the ondblclick HTML event.

const handleDoubleClick = () => {
 console.log("Double click fired");
};

const App = () => {
 return (
  <div className="App">
    <button onDoubleClick={handleDoubleClick}>Double Click me</button>
  </div>
 );
};

const entry = document.querySelector('#entry');
ReactDOM.render(<App />, entry );

Remember, you cannot assign the onClick and the onDoubleClick simultaneously on the DOM elements, if you do so, only the onClick will fire as the event listener is not able to differentiate the origin of the click (a single click is always part of the double click, the normal click event is triggered first).