Render DIV onClick
Unanswered
Giant panda posted this in #help-forum
Giant pandaOP
Hi 👋 ,
I'd like to render a div on click, and was wondering if someone could give me some guidance as too how I may achieve this?
However, I want to render the div inside of the outermost div, and not inside of the div which the icon (which triggers the handleClick() function is declared.
I'd like to render a div on click, and was wondering if someone could give me some guidance as too how I may achieve this?
const [open, setOpen] = React.useState(false);
function handleClick() {
if (open) setOpen(false);
else setOpen(true);
}
<div className={`${styles.main} bg-primary sm:h-16 sm:w-screen sm:block lg:hidden`}>
<div className="flex-row items-center sm:flex lg:hidden">
<Image src="/flag.png" alt="Flag" width="60" height="60" className="rounded-full lg:w-14 sm:w-10 m-3" />
<h3 className="font-montserrat text-white text-2xl font-light pr-6">BritSov One</h3>
<FontAwesomeIcon
onClick={handleClick}
icon={faBars}
className="lg:hidden sm:block text-white m-2 h-8 absolute right-0 mr-5 cursor-pointer hover:text-secondary ease-in duration-200"
/>
</div>
</div>
However, I want to render the div inside of the outermost div, and not inside of the div which the icon (which triggers the handleClick() function is declared.