how to add onClick when conditional rendering for profile dropdown - react-hooks

Question

I am trying to add the conditional rendering for user dropdown, so once the user is signed in, and when they click the account icon, the page will show the dropdown menu of that user. i am using useSelector to track the user state, right now, the dropdown menu is shown under the icon once the user sign in.... i want to add the onclick functionality on that, so they need to click the account icon, and then the menu will pop up, anyone know how to add that?
export default function Example() {
const user = useSelector((state) => state.user);
return (
<div className="bg-white">
<div className="ml-auto flex items-center">
<div className="hidden relative lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
<UserCircleIcon
className="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
aria-hidden="true"
/>
{user && (
<div className="w-24 z-10 rounded-md bg-white py-1 shadow-lg flex flex-col absolute mt-36 right-0 ring-1 ring-black ring-opacity-5 focus:outline-none">
<p className="bg-gray-50 flex items-center gap-3 cursor-pointer hover:bg-slate-100 trainstion-all duration-100 ease-in-out px-4 py-2 text-sm text-gray-700">
Profile
</p>
<p className="bg-gray-50 flex items-center gap-3 cursor-pointer hover:bg-slate-100 trainstion-all duration-100 ease-in-out px-4 py-2 text-sm text-gray-700">
Settings
</p>
<p className="bg-gray-50 flex items-center gap-3 cursor-pointer hover:bg-slate-100 trainstion-all duration-100 ease-in-out px-4 py-2 text-sm text-gray-700">
Signout
</p>
</div>
)}
</div>

Answer 1

If I understand your question correctly, what you need an additional local state to keep track of whether the user clicked on the "user" icon. You will need to pass that extra condition to your conditional rendering write a function to change the state to true once the user click on the user icon.
export default function Example() {
const user = useSelector((state) => state.user);
const [isOpen, setIsOpen] = useState(false); <--- new local state/condition ---<<
const handleOpenUserMenu = () => setIsOpen(true); <--- set function ---<<
return (
<div className="bg-white">
<div className="ml-auto flex items-center">
<div className="hidden relative lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
<UserCircleIcon
className="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
aria-hidden="true"
onClick={handleOpenUserMenu} <--- pass the set function here ---<<
/>
{user && isOpen && ( <--- add the extra condition here ---<<
<div className="w-24 z-10 rounded-md bg-white py-1 shadow-lg flex flex-col absolute mt-36 right-0 ring-1 ring-black ring-opacity-5 focus:outline-none">
<p className="bg-gray-50 flex items-center gap-3 cursor-pointer hover:bg-slate-100 trainstion-all duration-100 ease-in-out px-4 py-2 text-sm text-gray-700">
Profile
</p>
<p className="bg-gray-50 flex items-center gap-3 cursor-pointer hover:bg-slate-100 trainstion-all duration-100 ease-in-out px-4 py-2 text-sm text-gray-700">
Settings
</p>
<p className="bg-gray-50 flex items-center gap-3 cursor-pointer hover:bg-slate-100 trainstion-all duration-100 ease-in-out px-4 py-2 text-sm text-gray-700">
Signout
</p>
</div>
)}
</div>
</div>
</div>
);
}