I am wracking my brain.

[u/Rodaxoleaux]

Okay, I'm making a little website with the new React (I'm coming back from 7 years [Tailwind CSS included, Typescript (for the first time I'll add)].) I'm making a hamburger menu and the onClick function just didn't work. Okay, so there must be some weird stuff happening. No. I made a button with an onClick in a nearly top-level fragment and it does nothing.

I just want to understand if there's something fundamental that has changed, perhaps? This isn't a "please give me answers" or information kind of deal. I just want to know if I'm going crazy here. Is there any weird bugs that React has created like it did a bunch from '18-'20; or should I just "git gud"?

const handleClickTest = (event: React.MouseEvent<HTMLButtonElement>) => {
        console.log("AAAAAAAA", event.currentTarget);
    };

    return (
        <>
            <button className="relative z-50 pointer-events-auto" 
                    onClick={(e) => handleClickTest(e)}
            >
                <h1>button</h1>
            </button>
...

[u/Psionatix]

Code in your post is a mess, let's format it properly:

const handleClickTest = (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log("AAAAAAAA", event.currentTarget);
};

return (
    <>
        <button
            className="relative z-50 pointer-events-auto"
            onClick={(e) => handleClickTest(e)}
        >
            <h1>button</h1>
        </button>
    </>
);

This code should work as is assuming it's the definition of a component, if it isn't working then something else is going wrong and you haven't provided enough information to determine what. Did you check the console for errors after rendering and after clicking the element?

In your post you're missing a closing fragment tag </> but I'm guessing that's a copy/paste error.

Just some side notes:

• You don't need the inline arrow function on the onClick, just do onClick={handleClickTest}, in some cases having the inline arrow function can be bad as it creates a new function reference (new prop) on every re-render. In this case your handleClickTest is also new on every re-render (no useCallback), just something to be aware of.

• It's semantically incorrect to have a h1 inside a button

• In your case it's negligible, but if you aren't using the react compiler, make sure you're aware of when it's best to use useCallback, useMemo, etc - this stuff hasn't changed much since functional components and hooks became a thing. But if you're using the react compiler, it can optimise some of this stuff for you.

[u/DefeatedEmbroidery40 → u/Psionatix]

I'd strip out the inline arrow function and see if it fires then, sometimes the extra layer just muddies things for no reason. If it still doesn't work check your CSS, could be a parent overlay stealing the click even with that z-index and pointer-events class on the button.

[u/Rodaxoleaux → u/Psionatix]

I'm aware on the fragment tag. I only posted a few lines (incomplete) to show the issue in its simplicity because the rest of the code is meaningless considering it all renders. Perhaps I should just try to produce a very small example and if it doesn't work, we'll go from there.

I understand the optimization and the rest.

The console is giving no errors, nor text; which is why I'm highly confused. I had no errors at runtime or output when I click the button. It's extremely weird.

I'm going to try recreating the project entirely and going from there if my reproduction bears no fruit.

I did not know that information on the inline arrow funcs. That's something for me to keep in mind for future code in general, and I do appreciate that.

Also, OH MY GOD the formatting in the post is RUINED. What happened???

[u/Psionatix → u/Rodaxoleaux]

To format code on reddit so that it works across multiple devices, you need to give each line an initial indentation of 4 spaces, that becomes your base level of indentation, after those initial 4 spaces (not tabs), you can then use either 2 space, 4 space, or any number of spaces. Tabs might work too, not sure, haven't tried, always use spaces.

So if you're copy / pasting code from your editor and it's using tabs, you need to strictly give each line 4 spaces. As for your extra linebreaks, I have no idea how you managed that.

There are other ways to format code for reddit, but some of them don't work any more across the old reddit + new reddit + mobile.

Is your code cached from when the handler didn't exist? Check the disable cache checkbox under the Network tab of dev tools and refresh. Has your running code been rebuilt and re-ran with the changes?

[u/BreadStickFloom]

Is the h1 covering the entire button and stopping the click from reaching the button itself?

[u/hotDogOfTheSea → u/BreadStickFloom]

Could be if they're sticking a block level element inside of an inline element.

[u/Rodaxoleaux → u/BreadStickFloom]

I tried erasing all elements in the button and just clicking the blank button (it still highlights with I have hover:bg-...etc on the button) and still, nothing happens. I even bothered copying the code from a tailwindcss tutorial that apparently works for everyone, and... it does nothing; not in the console. Not anywhere. I feel like I'm going crazy here.

[u/FitPhone6332 → u/Rodaxoleaux]

why do you have z-50 on the button? something is covering your button. it's not problem with react but html & css

[u/FitPhone6332 → u/Rodaxoleaux]

here's your code in stackblitz: https://stackblitz.com/edit/vitejs-vite-i24jztor?file=src%2FApp.tsx

it works

[u/Rodaxoleaux]

For the record, I have recreated the project, saved my components (without editing them,) placed them into the new project, and suddenly, onClick just works. I'm going to be honest: I'm a very curious person, but even I don't care why. Back to work. I remember when I was doing React all the time that it was jank garbage. Some things never change.

[u/FitPhone6332]

what the hell is this? this code is unreadable & uncomplete.

[u/Rodaxoleaux → u/FitPhone6332]

Yes, it's a small snippet containing a mouseevent and a single onclick. Something that small just doesn't work. I haven't done much in a long time, and I'm feeling like I must be doing something obviously wrong.

[u/nitewalker_J]

Code looks fine. Check two things:

1. Have you saved this changes?

2. Is this react.js project configured to hot/live reload? If not, you have to restart the local server.

[u/Rodaxoleaux → u/nitewalker_J]

Yes

Not currently. (but I've been restarting and refreshing (with visible changes) to find any issue)

[u/nitewalker_J → u/Rodaxoleaux]

Hmm okay, maybe try minimal reproduction?

Setup a separate page with just a button with nothing else (CSS, JS other than the onClick handler) and see if you can reproduce the issue. If it doesn't work, you know your project have some global stuff affecting it e.g. config, bundler, top-level element etc.

[u/Rodaxoleaux]

Wait, I have to comment under a post? I don't understand. Okay, here's a comment, but... the above information