-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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.ReactNode allows passing {} as children which will crash at runtime #357
Comments
damn fantastic point. do you have an idea for alternative recommendation for typing children? |
@sw-yx, I am trying to figure out where this problem comes from still. Correct me if I am wrong; this repo assumes types are derived from DefinitelyTyped? Then, either the recommendation is wrong. But it is possible that the type It inherits Looking at the React source (typed in Flow afaict) it does not seem to agree Do you have any more insight, perhaps? |
well FYI the recommendation comes from me when I was learning R+TS so it's def not official. you're the first person in 2 years that has come along and raised any issue about it! and as for the typing and whether they could be better, this is a @ferdaber and @eps1lon issue. I bet this has been raised before and we might learn something here about why React.Fragment has to accept the invalid {}. |
Gotcha! Found the open issue at DefinitelyTyped/DefinitelyTyped#37596 Thanks for giving more context. I will keep this open until I understand more about the problem @DefinitelyTyped. The next steps from me will be:
|
very reasonable. we can also leave a small warning to others in our notes, as a simple first step. |
@sw-yx, absolutely. You know best what the readers will benefit from. |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions! |
added the warning as it is unlikely to be resolved for now |
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
closes typescript-cheatsheets/react#357 thank you @pomle
In https://github.com/typescript-cheatsheets/react#useful-react-prop-type-examples it says
ReactNode produces a false positive type check for
{}
.React version: 16.14
Steps To Reproduce
yarn create react-app repro --template typescript
React.ReactNode
as type in default App component.index.tsx
and supply{}
as children to ```The current behavior
Application crash at runtime with the error "Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead."
The expected behavior
The error should have been detected at compile time.
The text was updated successfully, but these errors were encountered: