react-helmet-async icon indicating copy to clipboard operation
react-helmet-async copied to clipboard

Problem: It seems to convert the onLoad event handler to a string.

Open hseoy opened this issue 3 years ago • 0 comments

Problem

I wrote the following code because I wanted to add the link tag dynamically.

<Helmet>{url && <link rel="stylesheet" href={url} onLoad={() => console.log('test')} />}</Helmet>

The link tag is added normally and the browser requests resources. However, the onLoad event handler is simply converted to a string and does not work.

<link rel="stylesheet" href="<URL>" onload="() => console.log("test")" data-rh="true">

If the code is written as below, 'test' is printed on the console, but a type script error occurs on the code. Because the prop type of onLoad is 'React.ReactEventHandler<HTMLLinkElement>'.

<Helmet>{url && <link rel="stylesheet" href={url} onLoad="console.log('test')" />}</Helmet>
Type 'void' is not assignable to type 'ReactEventHandler<HTMLLinkElement> | undefined'.

I expected the code to be interpreted by React rather than simply changing it to a string.

My environment

  • React Framework: Remix

I simply added HelmetProvider to root and used Helmet where I needed it.

<HelmetProvider>
    <Outlet />
</HelmetProvider>

The remix is SSR, did I need to set up for this problem?

Please check if this is a problem with react-helmet-async or if I set it wrong.

hseoy avatar Jul 16 '22 15:07 hseoy