React - onDoubleClick example

3 points
Created by:
Dirask Community

In this article we would like to show you how to use onDoubleClick event in React.

Quick solution:

<button onDoubleClick={myFunction}>Click me</button>

Practical example

In below example we use handleDoubleClick arrow function with button's onDoubleClick property that handles double click event.

App.js file example:

// ONLINE-RUNNER:browser;

//Note: Uncomment import lines during working with JSX Compiler.
// import React from react';
const handleDoubleClick = () => {
  console.log('handleDoubleClick catched');

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

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

Browser output:

Double click event handling example in React.
Double click event handling example in React.

Hint: React has it's own onDoubleClick property to handle double click event that is equivalent of dblclick event that is used by pure JavaScript.


Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - friendly IT community for everyone.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé