Implementing onClick event handling in Material UI components using Typescript

I am attempting to pass a function that returns another function to material UI's onTouchTap event:

<IconButton
   onTouchTap={onObjectClick(object)}
   style={iconButtonStyle} >
      <img alt={customer.name} className="object-img" src={object.avatarSrc} />
</IconButton>

Unfortunately, I keep encountering the following error message:

Type '{ onTouchTap: Function; style: CSSProperties; tooltip: string; children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<IconButton> & Readonly<{ children?: ReactNode; }> ...'.

If I simply pass a function without any arguments, the click event triggers successfully and everything functions as expected:

<IconButton
       onTouchTap={onObjectClick}
       style={iconButtonStyle} >
          <img alt={customer.name} className="object-img" src={object.avatarSrc} />
    </IconButton>

However, this function receives an event parameter by default, which does not align with my requirements. I need to find a way to pass an object containing specific data instead. Does anyone have insights on how to properly set up a function that returns another function or a handler for onTouchTap or onClick events in React using TypeScript?

javascriptreactjstypescriptmaterial-ui

Answer №1

In order to send arguments to the onTouchTap function, you must use an arrow function and then invoke the function with the specific arguments. Here's how you can do it:

<IconButton
   onTouchTap={() => onObjectClick(object)}
   style={iconButtonStyle} >
      <img alt={customer.name} className="object-img" src={object.avatarSrc} />
</IconButton>

The purpose behind this approach is because properties like onTouchTap expect a function object, not a function call. By utilizing an anonymous function (the arrow function), you are able to effectively pass the desired arguments when the function is called.

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

Employing ng-click within a displayed column of Datatable

Currently, I am utilizing a plain Datatable in AngularJS without any Angular-Datatable libraries. Everything appears to be working well except for one issue. Here is the datatable code snippet: $scope.siInfoTable = $('#siInfoTable').DataTable({ ...

javascriptjqueryangularjsdatatable

typegrapql encounters an issue with experimentalDecorators

I'm currently delving into TypeGraphQL and working on building a basic resolver. My code snippet is as follows: @Resolver() class HelloReslover { @Query(() => String) async hello(){ return "hello wtold" } } However, ...

node.jstypescriptgraphqltypegraphql

Exploring Function Overriding in TypeScript

Currently, I'm working on developing a TypeScript method. import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs'; @Injectable({ p ...

angulartypescript

After calling sequelize.addModels, a Typescript simple application abruptly halts without providing any error messages

My experience with Typescript is relatively new, and I am completely unfamiliar with Sequelize. Currently, I have only made changes to the postgres config in the .config/config file to add the dev db configuration: export const config = { "dev" ...

node.jstypescriptsequelize.jssequelize-typescript

Troubleshooting data mapping in React applications

Can anyone tell me why I am having trouble mapping through the todos? I'm following an online tutorial and my code is exactly the same as the example, but for some reason it's not iterating through the data. I can see the todos in the client-side ...

reactjspostgresqlexpress

Angular JS | Sending information to two separate controllers when clicked

I have a series of projects displayed in divs using ng-repeat. Each div contains a link with the project's id. My goal is to bind the project id on ng-click to update a factory. This will enable me to share the clicked project's id with another ...

javascriptangularjs

How can I efficiently transfer a JavaScript array to a PHP script using the GET method?

My web application is designed with jQuery allowing users to manipulate visual elements. The next step is sending the JavaScript object state to PHP for storage in a database. While I prefer using GET, I am open to solutions that involve POST submission as ...

phpjavascriptjquery

PhpStorm is unable to resolve the @ionic/angular module

I have encountered a peculiar issue with my Ionic v4 project. While the project runs smoothly, PhpStorm seems unable to locate my references to @ionic. https://i.stack.imgur.com/umFnj.png Interestingly, upon inspecting the code, I realized that it is act ...

typescriptionic-frameworkphpstormionic4

Integrating foundation-sites with webpack, unable to apply styles

Delving into the world of webpack for the first time has been quite a daunting experience! I'm attempting to set up the foundation for sites, but I feel completely lost when it comes to configuring it properly. Here is my Webpack configuration: var ...

cssnode.jsreactjswebpack

Utilize React to selectively execute either Server-Side Rendering or Client-Side

My current website utilizes SSR (using nextJS) to display the landing page in the root directory. However, I am interested in having my create-react-app application displayed when a user is logged in, and revert back to showing the landing page when they a ...

reactjsnext.jscreate-react-appserver-side-rendering

How to interact with AngularJS drop-down menus using Selenium in Python?

I have been working on scraping a website to create an account. Here is the specific URL: Upon visiting the site, you need to click on "Dont have an account yet?" and then click "Agree" on the following page. Subsequently, there are security questions th ...

javascriptpythonangularjsselenium-webdriverdrop-down-menu

Creating a smooth sliding textarea in HTML

I am working on creating an HTML table with numerous text input areas (textarea) that expand downwards when clicked. Currently, the textarea element expands properly but disrupts the layout of the table. My goal is to achieve a design like this Instead o ...

javascriptjqueryhtmlcsslayout

Best practices for organizing and storing a todo list in ReactJS using local storage

import React, { useState, useEffect } from 'react'; const TodoList = () => { const [tasks, setTasks] = useState(JSON.parse(localStorage.getItem('tasks')) || []); const [newTask, setNewTask] = useState(''); con ...

reactjswebnext.jstodo

Is there a way to exit from await Promise.all once any promise has been fulfilled in Chrome version 80?

Seeking the most efficient way to determine which server will respond to a request, I initially attempted sending requests in sequence. However, desiring to expedite this probing process, I revised my code as follows: async function probing(servers) { ...

javascriptgoogle-chromeasync-awaitpromisepolyfills

Submitting the form does not result in the textbox being cleared

I have been attempting to clear the txtSubTotal text box upon clicking the PROCEED button, but it seems that my efforts have been in vain despite trying various code examples, including those from SO. btnProceed/HTML <input type="submit" name="btnProc ...

javascriptphphtml

Tips for extracting the chosen value from a dropdown list within a table cell using JavaScript

Here is an example of an HTML element: <td> <select> <option value="Polygon 47">Polygon 47</option> <option value="Polygon 49">Polygon 49</option> </select> </td> I am looking for a ...

javascripthtml

When utilizing the data property within the useQuery() hook, an error may arise stating "Unable to

This problem has me scratching my head. The code snippet below is triggering this error: TypeError: Cannot read properties of undefined (reading 'map') When I use console.log() to check res.data, everything seems normal and there is data present ...

javascriptnode.jsreactjsreact-query

What is the best way to solve the problem of Chrome auto-complete overlapping with labels in Vuetify?

When attempting to make a login form using outlined text fields in Vutify, there is an issue with Chrome autocomplete overlapping the labels. <v-text-field v-model="email" label="e-mail" name="email" outlined prep ...

javascriptgoogle-chromeautocompletevuetify.js

What are some strategies for maximizing the value of the initial click?

For the past few days, I've been struggling with this particular aspect of the project. Despite extensive research, I haven't been able to find a solution. The issue lies in retrieving a variable from the contextAPI. Although it updates to the co ...

reactjsnext.js

What is the best way to set breakpoints on Material UI components?

Currently, I am exploring material-ui and I'm curious if there is a way to set all breakpoints at once. The code snippet below seems quite repetitive. Is there a more efficient method to achieve this? <Grid xs={12} sm={12} md={12} lg={12} xl={12} ...

cssreactjsmaterial-ui