I need to open a very simple search bar in reactjs, and there is no closing button because I want to click on the same button to close it.
Here is some code I tried out but didn't work.
const [searchIsOpen, setSearchIsOpen] = useState(false);
const search = () => {
if (searchIsOpen) {
setSearchIsOpen(true);
} else {
setSearchIsOpen(false);
}
};
<button onClick={search}
className="absolute md:left-8 left-3 lg:left-2 top-6 md:top-8 cursor-pointer">
</button>
<div>
<input type="text" name="" id="" />
</div>
thank you.
You should use conditional rendering.
const [searchIsOpen, setSearchIsOpen] = useState(false);
const search = () => {
setSearchIsOpen(!searchIsOpen);
};
<button onClick={search} className="absolute md:left-8 left-3 lg:left-2 top-6 md:top-8 cursor-pointer"></button>
{
searchIsOpen && <div>
<input type="text" name="" id="" />
</div>
}
<div>
{ searchIsOpen && <input type="text" name="" id="" /> }
</div>