ReactJS | Typescript type for onClick. `onclick does not exist on type`x`

Question

I have the below method, that renders a delete Icon, and I use it in my main Container. Everything works fine. The only problem, I have, and it is a small cosmetic one, is an any type that I cannot figure out, what that type is.

import React from 'react';
import Icon from './Icon';

const DeleteActionRenderer = (options: any): Function => (cell: string, row: string): JSX.Element => {
  const deleteActionClick = options.onClick({ cell, row }); // The error is here. On options.onClick.
  return (
    <div>
      <a href="#" className="text-danger p-1 text-lg" onClick={deleteActionClick}>
        <Icon icon="trash" />
      </a>
    </div>
  );
};

export default DeleteActionRenderer;

As you can see, options have any as a type. I cannot figure out, what options is. Nothing except any works. object, string, number, Function, MouseEvents, SyntheticEvent. Not even unknown.

The only type that works is any.

I console.log(options, typeOf options), and it prints out an object. See below:

{onClick: ƒ}
onClick: ƒ (_ref2)
arguments: (...)
caller: (...)
length: 1
name: ""
prototype: {constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: index.tsx:146
[[Scopes]]: Scopes[5]
__proto__: Object

Any ideas? This any is like a sore thumb, for a little while now. I cannot figure it out at all. Thank you for your time.

Alejandro Garcia Anglada · Accepted Answer · 2019-08-09 08:08:27Z

1

The code above looks to me like a HOC (High Order Component) https://reactjs.org/docs/higher-order-components.html

I can see in your code that the way you are using DeleteActionRenderer is not correct as the options object in this case is part of props so it will be coming in the function that you return from DeleteActionRenderer and not in DeleteActionRenderer itself.

In your case, for options type will be:

type Options = {
   onClick: Function
}

Hope it helps.

answered Aug 9, 2019 at 8:08

Alejandro Garcia Anglada

2,4031 gold badge29 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS | Typescript type for onClick. `onclick does not exist on type`x`

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related