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

geekTechnique · Accepted Answer · 2022-12-05 21:40:05Z

0

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().

answered Dec 5, 2022 at 21:40

geekTechnique

9062 gold badges13 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem with doubleclick handle in react jsx

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related