[BUG] - `Button` uses deprecated `onClick` instead of `onPress`

See original GitHub issue

Describe the bug

Currently, the Button component uses the deprecated onClick. However, onClick is deprecated in favor of onPress, as shown in the warning below from React Dev Tools: image

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

  1. Install the Chrome extension React Dev Tools.
  2. Create a button:
    import { Button } from "@nextui-org/react";
    
    export default function App() {
      return <Button>Hello</Button>;
    }
    
  3. Run the next dev server and open localhost:3000 in Chrome.
  4. Click the button.

Expected behavior

image

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

5reactions
jz222commented, Jun 16, 2022

Hi,

@jrgarciadev I’m a bit confused. You mentioned that this is expected behavior and if I replace onClick with onPress, the warning indeed disappears. However, when I click the button, the warning shows up again. This can be reproduced with the latest CRA and NextUI beta 9. I found this line, but I’m not sure if it’s actually related to this topic.

4reactions
buskeronecommented, Aug 8, 2022

@jrgarciadev can we consider to re open this issue? I think we all understand that we should use onPress instead of onClick but the problem is that I’m still getting the same warning.

e.g

<Button onPress={handleConfirm}>
...
Read more comments on GitHub >

github_iconTop Results From Across the Web

onclick function is not working in react native application
The problem wasn't specific to React native, the general form of both solutions has been: the component doesn't accept a click handler. I...
Read more >
React Native touchable vs. pressable components
In React Native, we can use the Button component to handle basic touch events. The Button component renders a platform-specific, native button ......
Read more >
OnMouseUp interfering with OnClick - Tasharen Entertainment
OnMouseUp is a Unity event that will be deprecated in a future release of Unity. You should not rely on it. Use NGUI's...
Read more >
Element: click event - Web APIs | MDN
An element receives a click event when a pointing device button (such as a ... Instead of using this deprecated (and non-standard) property, ......
Read more >
Button | Android Developers
android:includeFontPadding, Leave enough room for ascenders and descenders instead of using the font ascent and descent strictly.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found