Question 371958 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – onClick function doesnt work on first load in nextJs but works fine once i refresh

i have a code in Nextjs 14,when i first load the site on localHost the toggleOpen button doesnt work, its works just fine when i refresh it. the issue i am having is when i first load the site on localhost and i click on the hamburger menu or the user menu icon it doesnt give me the dropdown, but when i refresh the page itw orks just fine


"use client "
import React, { useCallback, useState } from 'react'
import { AiOutlineMenu } from "react-icons/ai"
import { FaUser } from "react-icons/fa";
import MenuItem from './MenuItem';

const UserMenu = () => {
    const [isOpen, setIsOpen] = useState(false);

    const toggleOpen = useCallback(() => {
        setIsOpen((value) =>  !value);
    }, []);

  return (
    <div className='relative'>
        <div className='flex flex-row items-center gap-3'>
            <div onClick={() => {}} className='hidden md:block text-sm font-semibold py-3 px-4 rounded-full hover:bg-neutral-100 transition cursor-pointer'>
                List your property 
            </div>
            <div onClick={toggleOpen} className='p-4 md:py-1px-2 border-[1px] border-neutral-200 flex flex-row items-center gap-3 rounded-full cursor-pointer hover:shadow-md transition'>
              <AiOutlineMenu />
              <div className='hidden md:block'>
               <FaUser />
              </div>
            </div>
        </div>
        {isOpen && (
            <div className='absolute rounded-xl shadow-md w-[40vw] md:w-3/4 bg-white overflow-hidden right-0 top-12 text-sm'>
                <div className='flex flex-col cursor-pointer'>
                    <>
                     <MenuItem onClick={() => {}} label="Login" />
                     <MenuItem onClick={() => {}} label="Signup" />
                    </>
                </div>

            </div>
        )}
    </div>
  )
}

export default UserMenu
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    thank you very much, i have tried that its still not allowing me to click on it on first load and works fine when I refresh, I have even tried different browsers, has anyone else had this issue, I cant work out if its with next js, it doesn't seem to be the code itself


  2. 0

    i believe you don’t need to use useCallback in this code , there is no need to cache the function, instead do this

    const toggleOpen = () => {
    setIsOpen((value) =>  !value);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search