Whenever I pass onClick on a React Icon Component I get a typescript error

React
1

This warning Occurred when I worked on the “Styling component” topic’s 2nd exercise (Building a Like Component).

So, I install React icons and use the “heart icon (AiFillHeart & AiOutlineHeart)”.

When I pass in an “onClick={}” attribute I get the below error from typescript in my IDE.

Type ‘{ size: number; onClick: () => void; }’ is not assignable to type ‘IntrinsicAttributes & IconBaseProps’.
Property ‘onClick’ does not exist on type ‘IntrinsicAttributes & IconBaseProps’.

This does not break the code or stops the program from running, I guess its a warning from typescript saying the “onClick” is not a prop to be used on the react icon. But in Mosh’s solution this is not the case, there is no such error.

Everything still works, I just want to know why this error is coming and how to resolve it so I can understand whats wrong.

Attached below is the screenshot for the same

image
image2280×1014 241 KB

1 Like
2

It seems to be working for me so here are some thoughts.

The message means that the return type for the icon does not include ‘onClick’ so it’s just like if you tried to pass ‘foobar’ .

If I ctrl+click down the rabbit hole to see the type I find that

AiOutlineHeart is type IconType
IconType = (props: IconBaseProps) => JSX.Element
IconBaseProps extends React.SVGAttribute<SVGElement>
SVGElement extends Element

Element does include 
onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;

So, that is why I’m able to add a ‘onClick’ to my icon.

Knowing that, I would guess either at some point in a version update, react-icons changed the type to allow for ‘onClick’ or there is a problem with the way typescript is interpreting the complex types.

I’ve tried telling vscode to use both the workspace version in 2 different projects (versions 4.9.3 and 4.9.5) and the nightly update version in vscode (version 5.1.0 currently) so I don’t think it is a typescript version issue. However, I am having to use version 4.9.5 in the main course project because of a different reason (chakra ui errors)

Here are the versions in my package.json

"react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.8.0"

Hope something there helps

1 Like
3

Thanks a lot, @isimmons33! That totally makes sense. Appreciate it!

4

Hi SubuHunter, how did you solve this issue?

1 Like
5

Hi @ashutoshshelke. I encountered the same issue today. Unlike @isimmons33, my Element does not include an onClick event. After doing some research online, I discovered I could wrap the icon element in a <div> and move the onClick attribute into that <div>. The onClick function still works as expected, but the IDE no longer throws an error.

1 Like
6

Thanks @jritchey😊. I will make this change in my code as well.
Do you know why Mosh’s IDE is not throwing the error?

7

No problem, @ashutoshshelke! :blush: I’m not entirely sure why Mosh’s IDE is not throwing an error, but, as @isimmons33 indicated, I would also guess that there was a change in some library’s version update. I tried downgrading to Mosh’s react-icons version (4.7.1), but the error persisted. Following the ctrl+Click rabbit hole @isimmons33 mentioned, I was able to remove the error in another manner.

In Visual Studio Code, if you ctrl+Click the icon name in your import statement, you should be directed to the appropriate line in index.d.ts. From there, if you ctrl+Click the type IconType, you should be directed to the appropriate line in iconBase.d.ts. If you ctrl+Click the prop IconBaseProps in that line, you should be directed to the block of code just above. For me, the block of code looked as follows:

export interface IconBaseProps extends React.SVGAttributes<SVGElement> {
    children?: React.ReactNode;
    size?: string | number;
    color?: string;
    title?: string;
}

I was able to clear the onClick error we’re discussing by adding an onClick attribute as follows:

onClick?: React.ReactNode;

The same block of code now looks as follows:

export interface IconBaseProps extends React.SVGAttributes<SVGElement> {
    children?: React.ReactNode;
    size?: string | number;
    color?: string;
    title?: string;
    onClick?: React.ReactNode;
}

Everything functions as expected (so far).

Being new to React, I’m not sure what the best method is for resolving our error. (I’m sure the “best method” is subjective) If the onClick event no longer exists (or never existed) for icons, I’d rather not add it as I can’t be certain of potential consequences elsewhere. For that reason, I’ll likely resolve to wrapping icons in div tags if I want to pass the icons an onClick event; I’ve been seeing that method (along with other HTML tags like <span> and <a>) in all my research so far.

I’m sorry I don’t have a firm answer to your question, but I hope my response helps!

2 Likes
8

Thank you so much @jritchey for the detailed explanation.

1 Like
9

Hi @ashutoshshelke ,

I ignored the warning and moved on to the other course videos. I felt I can debug that if i get it in projects. It was a weird issue though.

Sorry I couldn’t help.

1 Like