Problem with doubleclick handle in react jsx

Question

I've been taking a series of tutorials on youtube on React web apps. All is fine but when I try to get the double click handle to work. Anyone that can help me out? This is the code

    <main>
        <p onDoubleClick={handleClick}>
            Hello {handleNameChange()}!        
        </p>
        <button onClick={handleClick}>Click It</button>
        <button onClick={() => handleClick2('Dave')}>Click It</button>
        <button onClick={(e) => handleClick3(e)}>Click It</button>
    </main>

All the buttons work, but the double click part of the code don't register anything when I look at the console in chrome development tools. Anyone that has an idea on what is wrong? And, the handleNameChange function works (it just display a random name) but the idea with the excercise is to make the name doublecklickable.

I have looked at the code for typos, rewritten the code from scratch - I need a hint about what is wrong with the code

score 0 · Answer 1 · answered Dec 05 '22 at 21:40

Don't use onDoubleClick. Instead, use e.detail to get the number of clicks.

<button onClick={(e) => {
  if (e.detail === 2) handleDoubleClick()
}}>
  "Click me"
</button>

There is a similar thread here with great explanations as to why you aren't getting the results you expect from onDoubleClick().

Problem with doubleclick handle in react jsx

1 Answers1