Clicking the button will trigger the onclick event

I'm working on a button component in TypeScript and I have encountered an issue with passing the event to the submitButton function.

import * as React from 'react';
interface Props {
 className?: string;
 text: string;
 onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
 type?: string;
}
const submitButton = (event: React.MouseEvent<HTMLButtonElement> , props: 
Props) => {
 event.preventDefault();
 props.onClick(event);
};
export const ButtonComponent = (props: Props) => {
 return (
  <button
   className={props.className}
   type={props.type}
   onClick={submitButton(event, props)}
  >
  {props.text}
 </button>
 );
};

How can I resolve this error message:

Argument of type 'Event' is not assignable to parameter of type 'MouseEvent'. Property 'altKey' is missing in type 'Event'.

Answer №1

You need to make sure to pass the function submitButton as a handler for the onClick event instead of calling it directly during render. This way, you will have access to the event object and pass the necessary props.

Modify the code to include the function in the onClick event like this:

<button className={props.className}
        type={props.type}
        onClick={event => submitButton(event, props)}>
  {props.text}
</button>

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

Finding and retrieving specific information from nested arrays within a JSON object can be done by implementing a method that filters the data

I have an array of objects where each object contains a list of users. I need to be able to search for specific users without altering the existing structure. Check out the code on StackBlitz I've tried implementing this functionality, but it's ...

Having trouble getting the Underscore.js template to function correctly with JSON data

Hello there! I have some PHP code $arr = array("title"=>"sample Title", "body"=>"151200"); echo json_encode($arr); The data output is: {"title":"test Title","body":"151200"} When I attempt to use this JSON output in Underscore, I encounte ...

What steps should I take to customize the design of my Stripe subscription payment page?

I am having trouble with the alignment of the subscription payment page, which is currently displaying all information in a single line. I would like to format it like a traditional payment form with card number, CVV, and expiry on separate lines rather th ...

Send data from input to controller without using $scope

I am encountering an issue with the code below. Typically, I would resolve this problem using $scope, but this time I have been asked to find a solution without utilizing $scope in the controller. I am implementing the "controller as" syntax for managing ...

What is the best way to create individual Menu items in a React/MUI navigation bar?

I am currently developing a navigation bar for an application, and I seem to be facing an issue with differentiating between multiple Menu/MenuItem elements. No matter what approach I take, both Menus and their respective MenuItems end up directing to the ...

What is the best method for creating a top margin that is dependent on the height of the browser?

Is there a way to make the CSS margin: top; on my HTML main_content element relative to the browser window? I want the main_content to always stay at the bottom of the browser window. How can I achieve this? I attempted the following code, but it didn&apo ...

Remove the attribute from the element in the ng-repeat loop

Here is my ng-repeat code snippet: <th ng-repeat="field in tableFields" translate="{{field.headerTitle | translate}}" ts-criteria="{{field.sortable ? field.fieldKey : null}}"> <label class="i-checks" ng-if="field.isCheckbox"> & ...

When the progress bar is clicked, the background color changes and then changes back again

https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7 https://i.stack.imgur.com/Bnd0k.png I have created a progress bar that resembles the screenshot provided. When I hover over it, the color changes to green. However, I am looking for assistanc ...

The performance of the Ionic app is significantly hindered by lagging issues both on Google

After starting to work with the ionic framework, I noticed a significant change in performance when testing an android app on Chrome for the first time. It was fast and responsive until I added a button that led to a screen with navigation bars, side men ...

The width of the table remains consistent

I have created a division that includes two tables stacked on top of each other. However, I am facing an issue where the width of the second table remains fixed and does not change even when I try to increase it. Here is the code snippet below: functio ...

What is the most effective method of utilizing union or extend in TypeScript when faced with a comparable scenario?

I have a function that takes in two different types of objects: const canBeGenericOrDefaultData = { id: 123, pointData: { square: 'x145', triangle: 'y145' } } function submitHandler(canBeGenericOrDefaultData: AllTheDatas | G ...

Issue occurs when trying to access the 'set' property of an undefined variable, leading to an error message stating "Cannot read property 'set' of undefined" while using 'this

I'm facing an issue while setting up basic cookies for my Vue project. When I try to set a cookie, I encounter the following error. My package.json file indicates that I am using vue-cookies version ^1.7.4. The error message occurs when I click the bu ...

Contrast arrays and eliminate values that do not match

$scope.territories = [ { name : "One"}, { name : "Two"}, { name : "Three"}, { name : "India"}, { name : "Japan"}, { name : "China"} ]; $scope.tempTerritories = [ { name : "One"}, { name : "Two"}, { name : "global"}, ]; ...

Using ThreeJS/WebGL to Send Functions to Shaders

I have created a custom noise function that accepts a 3D coordinate (x, y, z) and returns a noise value between 0 and 1. I am interested in incorporating this function into my vertex shader to animate vertex positions. Can I access this external function f ...

Scrolling with jQuery to create a fixed navigation bar

I'm having an issue with my navbar on my website. I used CSS and jQuery to keep it fixed at the top, but now when I click on a menu item, it doesn't scroll to that section of the page. Can anyone help me troubleshoot this problem? ...

Any methods for integrating js.erb files in Ruby on Rails 7?

I've been searching for a while now on how to integrate js.erb files into my Ruby On Rails 7 project, but I haven't been able to find any helpful information. Have js.erb files become obsolete in Rails 7? If so, is there a way to include partials ...

Switching out a traditional class component with a functional component within a hook to deduce properties from T

One challenge is to subtract props from T within the withHookFn function using a function instead of a class as successfully done in the withHook function. The code contains comments explaining this issue. Dive into the code for more insights. import Reac ...

Ensuring Filesize Verification Prior to Upload on Internet Explorer Using Javascript

Can JavaScript be used to verify a file's size before it is uploaded to the server at the client side? This application is developed using EXTJS and Java and is limited to Internet Explorer 7 on Windows XP machines. ActiveX cannot be used. The workf ...

Refreshing Form after Saving in Angular 4

After clicking the Save button, I want to reset the form (addUserForm). I created a modal with a form to input user data. This form serves for both editing existing data and creating new data, with the flag 'Create' or 'Update' differen ...

The preflight request in Angular2 is being rejected due to failing the access control check: The requested resource does not have the 'Access-Control-Allow-Origin' header

I encountered an issue while attempting to execute a basic POST request to establish an account using an API in .NET. The process fails with the mentioned warning title. Interestingly, performing the same request in Postman (an API testing tool) yields a s ...