React and TypeScript threw an error: trying to execute setSearchQuery, which is not a function

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);
}

Answer №1

It seems like the issue arises when setSearchQuery is invoked within the TopPanel component without first defining props. Keep in mind that ISearchInputProps is an interface and not a concrete definition.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling with adding documents into mongoDB with the help of mongoose and node.js

I have a mongoose model defined below: module.exports = mongoose.model('vbDetail', { company_name: String, rowsdata: {vals: { date: Date, transaction_type: String, transaction_num: Str ...

When the parent div contains at least four divs, show the scroll arrow containers

In my code, there is a parent div that holds multiple child divs. If the number of child divs within the parent div exceeds 4, I want to show the scroll arrow containers. If it's less than 4, then those arrow containers should not be displayed. The ...

Learning to retrieve JSON data from an API using JavaScript

https://i.sstatic.net/OQZvD.pngGreetings! I am currently facing an issue while trying to retrieve JSON data from an API. Whenever I attempt to extract data from the API, everything works smoothly except for when I try to access the distance value, which re ...

"Learn the technique of adding a comma after each object and transforming it into an array using JavaScript in React JS

Is there a way to add commas after each object and transform it into an array? Below is the response data: {"url":"example.com/john","age":"32"}{"url":"example.com/mike","age":"42& ...

Problems with Vuex getter reactivity when used in conjunction with Vue router

I've encountered an issue with my Vuex getter that fetches data for the current route and displays it in a Vuetify v-data-table. Everything works perfectly fine when the component is initially created. However, when I add a new entry to the data array ...

To determine if an AJAX request is synchronous or asynchronous using Browser Developer Tools

Is there a method to verify if a specific ajax request is asynchronous or synchronous using Browser Dev Tools such as Chrome Developer Tools or Firebug? The HTTP Request Header for an ajax request does not specify whether it is sync or async. X-Request ...

The operation of the "CheckFileSystemCaseSensitive" task has encountered an unexpected failure. It was unable to load the file or assembly 'System.IO.FileSystem'

I recently upgraded my Visual Studio 2017 ASP.NET Core MVC web project by adding the Microsoft.TypeScript.MSBuild NuGet package v2.3.1 and updating my ASP.NET Core assemblies from 1.0.* to 1.1.1. However, after these changes, I encountered a new exception ...

Encountering issues with fs.writeFile function in a freshly set up Vue project

After initializing a new Vue project with vue cli, I encountered an error when attempting to write files in the main.js file. Below is the code snippet that caused the issue: const fs = require('fs'); // Data to be written to the file. let dat ...

Error: AngularJS: Invalid Argument Error. The argument 'ClientCtrl' is not defined as a function, it is currently undefined

As a newcomer to AngularJS, I am facing an issue while trying to add a controller to my website. Strangely, the other two controllers are functioning perfectly fine, but this particular one is not being recognized. Here is my app.js file: var app = angul ...

Incorporating Java project dependencies into an npm project

I'm facing a challenge in my development process, where I need to incorporate dependencies from a Maven Java project into my package.json file within my Vue/Typescript project. These dependencies are crucial for accessing specific data types that my p ...

Trouble arises when attempting to append a class through ng-class upon clicking

In a specific scenario, I am trying to change the border color from black to red in a div by appending a class using ng-class when clicked. However, when clicking a button, the modal opens but the class is not being appended as expected. <div ng-class ...

(Express JS) What is the correct way to integrate another module into my router? (I am consistently encountering an undefined reference error)

I am currently working on a basic PDF reader application that utilizes the pdf.js library from Mozilla. The user is expected to select a file, after which the website should automatically redirect to the /reader page displaying the PDF. However, I am facin ...

Exploring Typescript's type narrowing capabilities through destructuring

This code snippet is encountering errors: type Example = { x: true, y: null, z: null } | { x: false, y: Error, z: null } | { x: false, y: null, z: { val: number} } function getExample(): Example { return { x: false, y: null, z: { val ...

Switching visual representation that appears upon clicking the dropdown menu

Issue with Duplicating Dropdown and Image Change const image = document.querySelector('.item__img'); const checkbox = document.querySelectorAll('.imgOption'); function handleChange() { let imgsrc = this.getAttribute("data-value ...

"Tempus Dominus now offering a seamless experience without the need for an

The example code provided seems to be malfunctioning: <button id="idbtn"> $('#idbtn').datetimepicker(); ...

The animation only applies to the initial item in ngRepeat

After implementing async data loading in my application, I noticed that NgRepeat only animates the first element in an array. Check out the example on jsFiddle Here is the HTML code snippet: <div ng-repeat="x in data"></div> And here is the ...

Leveraging RXJS for real-time response to keyboard and mouse click combinations in web

I am new to RXJS and looking for a way to drag an HtmlElement when the user presses the space key and then drags the element with the mouse. The dragging should be initiated by either pressing the SPACE key followed by a left click, or vice versa. The dra ...

Organize a series of <span> elements into rows and columns through the use of CSS, JavaScript, or jQuery

Task: Your challenge is to display a list of span elements in both vertical and horizontal layouts without altering the HTML structure. Input: an unknown number of span elements within a parent span like the example below: <span id="parent"> <sp ...

Is there a way to retrieve the timestamp of a DOM change event when using MutationObserver for event tracking?

Currently, I am successfully using MutationObserver to monitor changes in the DOM. However, I would like to include a timestamp for each event. Unfortunately, there doesn't seem to be a timestamp property available in the MutationRecord. https://deve ...

Unable to invoke function from code-behind using PageMethods - error undefined

I am in the process of creating a website where users can customize their own cakes. Each cake comes with a base price and various options that may incur additional charges. These additional prices are stored in the database and can be retrieved using the ...