I encountered an issue where I am receiving the error message:
Uncaught TypeError: setSearchQuery is not a function
in my Next.js / Typescript app. This error occurs while typing a search query into the search box. I have implemented a generic search function in TypeScript which works perfectly fine, however, this error keeps popping up. Any insights on what might be causing this error?
TopPanel.tsx
export interface ISearchInputProps {
setSearchQuery: (searchQuery: string) => void;
export const TopPanel = (props: ISearchInputProps) => {
const { setSearchQuery } = props;
return (
<div>
<input
type="text"
placeholder="Search Assets..."
onChange={(event) =>
setSearchQuery(event.target.value)}
/>
</div>
);
}
AssetsList.tsx
import generiSearch from 'src/utils/genericSearch'
const [query] = useState<string>('');
const filteredData = reserves
.filter((res) => genericSearch(res, ['symbol'], query, false))
.map((reserve) => ({
...rest of the code...
}));
return (
...
);
}
genericSearch.ts
export default function genericSearch<T>(
object: T,
properties: Array<keyof T>,
query: string,
shouldBeCaseSensitive: boolean
): boolean {
if (query === '') {
return true;
}
const expression = properties.map((property) => {
const value = object[property];
if (typeof value === 'string' || typeof value === 'number') {
if (shouldBeCaseSensitive) {
return value.toString().includes(query);
} else {
return value.toString().toLowerCase().includes(query.toLowerCase());
}
}
return false;
});
return expression.some((expression) => expression);
}