Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React 18 Typescript error with function as child pattern #310

Open
poohcom1 opened this issue Apr 14, 2022 · 1 comment
Open

React 18 Typescript error with function as child pattern #310

poohcom1 opened this issue Apr 14, 2022 · 1 comment

Comments

@poohcom1
Copy link

poohcom1 commented Apr 14, 2022

Version

v2.0.5

Issue

When using with React 18, typescript will throw an error when a function is passed as a child, specifically to use the close callback. Although this worked previously in React 17, this now throws an error. I believe this is due to the removal of implicit children as props.

image

Test Case

https://codesandbox.io/s/reactjs-popup-issue-template-forked-8cn80o?file=/src/index.tsx

Proposed Fix

A simple addition of the function type under

export interface PopupProps {
  ...
  children: React.ReactNode | ((close: () => void, isOpen: boolean) => React.ReactNode)
}

in types.d.ts seemed to do the trick for me.

As a quick fix, augmenting the module in a declaration file will do the trick if you set skipLibCheck to true, but I'm not sure what other side effects this could produce.

EDIT: The proposed fix seem to already exist in the source code, but it's commented out:
image
Is there a reason it's commented out?

@poohcom1 poohcom1 changed the title React 18 Typescript Error with function React 18 Typescript error with function as child pattern Apr 14, 2022
@egor-sorokin
Copy link

Are there any updates on this? The error seems still exists

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants