I've been developing a feature in NextJS that allows users to search for YouTube videos based on their input. In order to optimize API calls, I decided to implement lodash debounce with the useCallback hook. However, I'm encountering an issue where I keep getting the error message:
TypeError: search(...) is undefinedBelow is the code snippet that I have written:
export default function VideoSearchComponent() {
const [modalVisible, setModalVisible] = useState(true);
const [searchQuery, setSearchQuery] = useState('');
const [searchResults, setSearchResults] = useState([]);
const search = useCallback(
debounce(async (keyword) => {
const response = await fetch("http://localhost:3000/api/search/" + keyword);
const data = await response.json();
return data;
}, 500),
[]
);
useEffect(() => {
if (searchQuery) {
search(searchQuery).then((results) => setSearchResults(results));
console.log(searchQuery)
console.log(searchResults)
} else {
setSearchResults([])
}
}, [searchQuery])
return (
<Modal label={'Search for videos'} show={modalVisible} handleClose={() => setModalVisible(false)}>
<div>
<IoSearch size='1.25em' color={searchQuery ? '#000' : '#9ca3af'}/>
<input type="text" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="eg: 'Standup Comedy'"/>
</div>
<SearchResults results={searchResults}/>
</Modal>
)
}
Could someone please assist me in understanding why my search function is showing as undefined?