Issue: The type 'Error: (data: string) => number' cannot be assigned to type '() => void'

Question

Issue: The type 'Error: (data: string) => number' cannot be assigned to type '() => void'

Encountering an issue while attempting to add a string to an array. Any assistance would be welcome.

Error message @ onClick:

Type '(productName: string) => number' is not compatible with type '() => void'.ts(2322) types.d.ts(59, 5): The expected type is derived from property 'onClick' which is defined here on type 'IntrinsicAttributes & ButtonProps'

The relevant code snippet is provided below

const productList : string[] = [];
const handleClick = useCallback((productName:string) => productList.push(productName),[]);

JSX

<Button primary onClick={handleClick}>Add Product</Button>

typescript onclick shopify

Answer 1

Answer №1

How can the button determine which product you have selected?

The solution is to create a new function for each button that will pass in the specific product that was clicked.

For instance:

function Button({ onClick, children }: { onClick: () => void, children: React.ReactNode }) {
  return <button onClick={onClick}>{children}</button>
}

function ProductList() {
  const productList : string[] = []; // this needs to be stored as state
  const handleClick = useCallback((productName:string) => productList.push(productName),[]);
  
  return <>
    <div>
      Product A
      <Button onClick={() => handleClick('A')}>Add Product</Button>
    </div>
    <div>
      Product B
      <Button onClick={() => handleClick('B')}>Add Product</Button>
    </div>
  </>
}

View playground

It is important to note that productList should be handled as state rather than just a regular variable. If you simply add items to an array without managing it as state, React will not detect the changes and won't re-render any components. This is a separate issue to consider but worth mentioning.

Answer 2

How can the button determine which product you have selected?

The solution is to create a new function for each button that will pass in the specific product that was clicked.

For instance:

function Button({ onClick, children }: { onClick: () => void, children: React.ReactNode }) {
  return <button onClick={onClick}>{children}</button>
}

function ProductList() {
  const productList : string[] = []; // this needs to be stored as state
  const handleClick = useCallback((productName:string) => productList.push(productName),[]);
  
  return <>
    <div>
      Product A
      <Button onClick={() => handleClick('A')}>Add Product</Button>
    </div>
    <div>
      Product B
      <Button onClick={() => handleClick('B')}>Add Product</Button>
    </div>
  </>
}

View playground

It is important to note that productList should be handled as state rather than just a regular variable. If you simply add items to an array without managing it as state, React will not detect the changes and won't re-render any components. This is a separate issue to consider but worth mentioning.

Issue: The type 'Error: (data: string) => number' cannot be assigned to type '() => void'

Answer №1

Similar questions

Guidelines for properly storing user data post-login in Nuxt3

Attempting to call a function with a template variable is not allowed

Using an Object as a Key in Maps in Typescript

Divide a given number of elements within an array of arrays

How do AppComponent and @Component relate to each other in AngularJs 2?

Encountered an error while attempting to compare 'true' within the ngDoCheck() function in Angular2

Creating a TypeScript function that automatically infers the type of the returned function using generics

The nest build process encounters errors related to TypeScript in the @nestjs/config package, causing it

TS2304 TypeScript (TS) Unable to locate the specified name

Issue regarding angularjs type definitions

The importance of handling undefined values in TypeScript and React

Error detected in Ionic socket.io chat page

How can an additional value be sent to the form validation method?

Typescript's date function offers a variety of useful features

Exploring the benefits of useContext in Expo router

What makes the type definition of `promise.all` particularly effective in this scenario?

The Freemode feature in SwiperJS is not functioning properly when used with React TypeScript

Is it possible to link observables in this manner? I've created a solution, but I'm uncertain if it's the most optimal approach

ERROR: Unable to call function getTime in Typescript

Encountering the following issue: "ERROR TypeError: Argument is required in IE 11"