OnClick isn’t working in div dropdown functionality
<div onClick={()=>console.log('hello')} key={item} className="text-white hover:bg-slate-700 hover:cursor-pointer">
import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { toggleMenu } from "../utils/AppSlice";
import search_icon from "../assets/download.png";
import { autosuggest } from "../utils/constants";
import { cacheResults, removecacheResults } from "../utils/searchSlice";
const Header = () => {
const dispatch = useDispatch();
const [searchText, setsearchText] = useState("");
const [searchapiText, setsearchapiText] = useState([]);
const [showserchResults, setshowserchResults] = useState(false);
const [LRU, setLRU] = useState([]);
const [pops, setpop] = useState(null);
const cache = useSelector((store) => store.search.searchState);
// console.log(cache)
const handleclick = () => {
dispatch(toggleMenu());
};
const handleitemClick =() =>{
console.log('tiem')
// setsearchText(item)
}
const autosuggestionsapi = async () => {
const autosuggestions = autosuggest + searchText;
// console.log('API Call - '+searchText)
const api = await fetch(autosuggestions);
const json_data = await api.json();
setsearchapiText(json_data[1]);
if (LRU.length >= 6) {
setLRU((prevItems) => {
const poppedElement = prevItems[0];
setpop(poppedElement);
const updatedElement = prevItems.slice(1);
return updatedElement;
});
}
setLRU((items) => {
const newitems = items;
newitems.push(searchText);
return newitems;
});
dispatch(
cacheResults({
[searchText]: json_data[1],
}),
);
};
const handleKeyPress = (event) => {
if (event.key === 'Enter') {
window.location.href = `/search?q=${searchText}`;
}
};
useEffect(() => {
const timer = setTimeout(() => {
if (cache[searchText]) {
setsearchapiText(cache[searchText]);
} else {
autosuggestionsapi();
}
}, 200);
if (pops !== null) {
const updatedCache = { ...cache };
delete updatedCache[pops];
dispatch(removecacheResults(updatedCache));
setpop(null);
}
return () => {
clearTimeout(timer);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchText, pops]);
return (
<div className="fixed w-screen z-10">
<div className="grid grid-cols-12 bg-black shadow-lg py-2 px-4 ">
<div className="md:col-span-2 col-span-3 flex">
<img
onClick={() => handleclick()}
className="md:h-7 h-6 md:mt-4 mt-5 cursor-pointer rounded-full"
alt="hamburger"
src="some_image"
/>
<a href="/">
<img
className="h-16"
alt="logo"
src="some_image"
/>
</a>
</div>
<div className="md:col-span-9 col-span-7 md:-ml-0 -ml-28">
<div className="flex ">
<input
value={searchText}
onChange={(e) => setsearchText(e.target.value)}
onFocus={() => {
setshowserchResults(true);
}}
onKeyPress={handleKeyPress}
onBlur={() => setshowserchResults(false)}
className="h-10 mt-3 w-1/2 ml-28 rounded-l-full border border-gray-500 text-gray-500 px-5 py-2 bg-black"
placeholder="Search"
type="text"
/>
<a href={"/search?q="+searchText}>
<button className="mt-3">
<img
alt="search"
className="md:h-[2.6rem] h-[2.5rem] border border-gray-500 rounded-r-full bg-gray-900"
src={search_icon}
/>
</button>
</a>
</div>
{**showserchResults && searchapiText.length > 0 && (
<div className="flex flex-col gap-1 rounded-lg fixed bg-custom-grey w-[16rem] md:w-[18rem] lg:w-[25rem] xl:w-[33rem] z-10 ml-28 md:ml-32 px-7 py-2 mt-2">
{searchapiText.map((item) => (
<div onClick={()=>console.log('hello')} key={item} className="text-white hover:bg-slate-700 hover:cursor-pointer">
{' '+item}
</div>
))}**
</div>
)}
</div>
<div className="flex md:col-span-1 col-span-2 md:mt-0 mt-1 ">
<img
className="h-8 mt-3 rounded-full"
alt="user-icon"
src="some_image"
/>
</div>
</div>
</div>
);
};
export default Header;