Clarify that ReactNode edge case is only for React <18 (#504)

* Clarify that ReactNode edge case is only for React <18

* Update docs/basic/getting-started/basic-type-examples.md

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>

Author: filiptammergard

README.md

@@ -403,7 +403,7 @@ const el2 = <MyArrayComponent />; // throws an error
 Unfortunately just annotating the function type will not help so if you really need to return other exotic types that React supports, you'd need to perform a type assertion:
 
 ```tsx
-const MyArrayComponent = () => Array(5).fill(<div />) as any as JSX.Element;
+const MyArrayComponent = () => (Array(5).fill(<div />) as any) as JSX.Element;
 ```
 
 [See commentary by @ferdaber here](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/57).
@@ -1793,16 +1793,14 @@ This was done [on purpose](https://github.com/DefinitelyTyped/DefinitelyTyped/pu
 ```tsx
 type Props = { children: React.ReactNode; type: "submit" | "button" };
 export type Ref = HTMLButtonElement;
-export const FancyButton = React.forwardRef(
-  (
-    props: Props,
-    ref: React.Ref<Ref> // <-- here!
-  ) => (
-    <button ref={ref} className="MyClassName" type={props.type}>
-      {props.children}
-    </button>
-  )
-);
+export const FancyButton = React.forwardRef((
+  props: Props,
+  ref: React.Ref<Ref> // <-- here!
+) => (
+  <button ref={ref} className="MyClassName" type={props.type}>
+    {props.children}
+  </button>
+));
 ```
 
 </details>

docs/basic/getting-started/basic-type-examples.md

@@ -74,9 +74,9 @@ export declare interface AppProps {
 ```
 
 <details>
-<summary><b>Small <code>React.ReactNode</code> edge case</b></summary>
+<summary><b>Small <code>React.ReactNode</code> edge case before React 18</b></summary>
 
-This code typechecks but has a runtime error:
+Before the [React 18 type updates](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210), this code typechecked but had a runtime error:
 
 ```tsx
 type Props = {
@@ -87,16 +87,16 @@ function Comp({ children }: Props) {
   return <div>{children}</div>;
 }
 function App() {
-  return <Comp>{{}}</Comp>; // Runtime Error: Objects not valid as React Child!
+  // Before React 18: Runtime error "Objects are not valid as a React child"
+  // After React 18: Typecheck error "Type '{}' is not assignable to type 'ReactNode'"
+  return <Comp>{{}}</Comp>;
 }
 ```
 
-This is because `ReactNode` includes `ReactFragment` which allows a `{}` type, which is [too wide](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37596#issue-480260937). Fixing this would break a lot of libraries, so for now you just have to be mindful that `ReactNode` is not absolutely bulletproof.
+This is because `ReactNode` includes `ReactFragment` which allowed type `{}` before React 18.
 
 [Thanks @pomle for raising this.](https://github.com/typescript-cheatsheets/react/issues/357)
 
-With the [React 18 type updates](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210), `{}` is no longer allowed in `ReactFragment`.
-
 </details>
 
 <details>