Next.js Discord

Discord Forum

onClick not working on nested div

Unanswered
Yellowstripe scad posted this in #help-forum
Open in Discord
Yellowstripe scadOP
<div className='lg:hidden relative'>
                    <Button
                        type='text'
                        icon={<MenuOutlined
                            className='text-logo-grey'
                        />}
                        onClick={() => setIsMenuOpen(prevData => !prevData)}
                        onBlur={() => setIsMenuOpen(false)}
                        className={`${isMenuOpen ? 'bg-main-background' : ''}`}
                    />
                    {isMenuOpen ?
                        <div className={`bg-menu-black border border-menu-grey p-3 mt-1 absolute end-1 rounded text-logo-grey font-semibold w-[8.7rem]`}>
                            <div
                                className='py-0.5 px-2 cursor-pointer hover:bg-menu-grey-secondary rounded'
                                onClick={() => redirect("/about")}
                            >About</div>
                        </div>
                        : <></>}
                </div>


has anyone encountered an issue in Next js wherein the onClick is not working when nested on a div but working when not nested?

1 Reply

PixeledCode
why not do this instead?
<Button
   type='text'
   icon={<MenuOutlined
   className='text-logo-grey'
   />}
  onClick={() => { setIsMenuOpen(prevData => !prevData); redirect("/about")}}
  onBlur={() => setIsMenuOpen(false)}
  className={`${isMenuOpen ? 'bg-main-background' : ''}`}
/>
......