Updated with explicit children in mind (#510)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: eps1lon

README.md

@@ -339,7 +339,7 @@ const Title: React.FunctionComponent<{ title: string }> = ({
 In [@types/react 16.9.48](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643), the `React.VoidFunctionComponent` or `React.VFC` type was added for typing `children` explicitly.
 However, please be aware that `React.VFC` and `React.VoidFunctionComponent` were deprecated in React 18 (https://github.com/DefinitelyTyped/DefinitelyTyped/pull/59882), so this interim solution is no longer necessary or recommended in React 18+.
 
-Please use regular function components or `React.VFC` instead.
+Please use regular function components or `React.FC` instead.
 
 ```ts
 type Props = { foo: string };
@@ -1178,9 +1178,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 = {
@@ -1191,16 +1191,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>

docs/advanced/patterns_by_usecase.md

@@ -346,79 +346,6 @@ class List<T> extends React.PureComponent<Props<T>, State<T>> {
 }
 ```
 
-### Generic components with children
-
-`children` is usually not defined as a part of the props type. Unless `children` are explicitly defined as a part of the `props` type, an attempt to use `props.children` in JSX or in the function body will fail:
-
-```tsx
-interface WrapperProps<T> {
-  item: T;
-  renderItem: (item: T) => React.ReactNode;
-}
-
-/* Property 'children' does not exist on type 'WrapperProps<T>'. */
-const Wrapper = <T extends {}>(props: WrapperProps<T>) => {
-  return (
-    <div>
-      {props.renderItem(props.item)}
-      {props.children}
-    </div>
-  );
-};
-
-/*
-Type '{ children: string; item: string; renderItem: (item: string) => string; }' is not assignable to type 'IntrinsicAttributes & WrapperProps<string>'.
-  Property 'children' does not exist on type 'IntrinsicAttributes & WrapperProps<string>'.
-*/
-
-const wrapper = (
-  <Wrapper item="test" renderItem={(item) => item}>
-    {test}
-  </Wrapper>
-);
-```
-
-[View in the TypeScript Playground](https://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoC4AOxiSk3STgHUoUwx6AFHMAZwA8AFQB8cAN4U4cYHRAAuOMIDc0uEWoATegEl5SgBRyki5QEo4AXnHJ0MAHR2MAOQg615GWgAWwADZamkrOjqFuHhQAvhQUAPQAVHC8EFywAJ4EvgFBSNT4cFoQSPxw1BDwSAAewPzwENRwMOlcBGwcaSkCIqL4DnAJcRRoDXWs7Jz01nAicNV02qUSUaKGYHz8Su2TUF1CYpY2kupEMACuUI2G6jKCWsAAbqI3MpLrqfwOmjpQ+qZrGwcJhA5hiXleMgk7wEDmygU0YIhgji9ye6nMniinniCQowhazHwEjgcNy1CUdSgNAA5ipZAY4JSaXTvnoGcYGUzqNTDuIubS4FECrUyhU4Ch+PxgNTqCgAEb+ZgwCBNAkEXS0KnUKVoACCMBgVLlZzopQAZOMOjwNoJ+b0HOouvRmlk-PC8gUiiVRZUamMGqrWvgNYaaDr9aHjaa4Bbtp0bXa+hRBrFyCNtfBTfArHBDLyZqjRAAJJD+fwqrPIwvDUbwADuEzS02u4MEcamwKsACIs12NHkfn8QFYJMDrOJgSsXhIs4iZnF21BnuQMUA)
-
-To work around that, either add `children` to the `WrapperProps` definition (possibly narrowing down its type, as needed):
-
-```tsx
-interface WrapperProps<T> {
-  item: T;
-  renderItem: (item: T) => React.ReactNode;
-  children: string; // The component will only accept a single string child
-}
-
-const Wrapper = <T extends {}>(props: WrapperProps<T>) => {
-  return (
-    <div>
-      {props.renderItem(props.item)}
-      {props.children}
-    </div>
-  );
-};
-```
-
-or wrap the type of the props in `React.PropsWithChildren` (this is what `React.FC<>` does):
-
-```tsx
-interface WrapperProps<T> {
-  item: T;
-  renderItem: (item: T) => React.ReactNode;
-}
-
-const Wrapper = <T extends {}>(
-  props: React.PropsWithChildren<WrapperProps<T>>
-) => {
-  return (
-    <div>
-      {props.renderItem(props.item)}
-      {props.children}
-    </div>
-  );
-};
-```
-
 ## Typing Children
 
 Some API designs require some restriction on `children` passed to a parent component. It is common to want to enforce these in types, but you should be aware of limitations to this ability.
@@ -593,11 +520,12 @@ If you want to conditionally render a component, sometimes is better to use [Rea
 type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
 type RouterLinkProps = Omit<AnchorProps, "href">;
 
-interface Button {
+interface ButtonProps {
   as: React.ComponentClass | "a";
+  children?: React.ReactNode;
 }
 
-const Button: React.FunctionComponent<Button> = (props) => {
+const Button: React.FunctionComponent<ButtonProps> = (props) => {
   const { as: Component, children, ...rest } = props;
   return (
     <Component className="button" {...rest}>
@@ -806,7 +734,7 @@ You can implement this by function overloads:
 
 ```tsx
 type CommonProps = {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   miscProps?: any;
 };
 
@@ -901,7 +829,7 @@ Sometimes you will want to write a function that can take a React element or a s
 ```tsx
 export interface Props {
   label?: React.ReactNode;
-  children: React.ReactNode;
+  children?: React.ReactNode;
 }
 export const Card = (props: Props) => {
   return (

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

@@ -59,12 +59,8 @@ Relevant for components that accept other React components as props.
 
 ```tsx
 export declare interface AppProps {
-  children1: JSX.Element; // bad, doesnt account for arrays
-  children2: JSX.Element | JSX.Element[]; // meh, doesn't accept strings
-  children3: React.ReactChildren; // despite the name, not at all an appropriate type; it is a utility
-  children4: React.ReactChild[]; // better, accepts array children
-  children: React.ReactNode; // best, accepts everything (see edge case below)
-  functionChildren: (name: string) => React.ReactNode; // recommended function as a child render prop type
+  children?: React.ReactNode; // best, accepts everything React can render
+  childrenElement: JSX.Element; // A single React element
   style?: React.CSSProperties; // to pass through style props
   onChange?: React.FormEventHandler<HTMLInputElement>; // form events! the generic parameter is the type of event.target
   //  more info: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#wrappingmirroring
@@ -80,7 +76,7 @@ Before the [React 18 type updates](https://github.com/DefinitelyTyped/Definitely
 
 ```tsx
 type Props = {
-  children: React.ReactNode;
+  children?: React.ReactNode;
 };
 
 function Comp({ children }: Props) {

docs/basic/getting-started/context.md

@@ -252,7 +252,10 @@ interface ProviderStore {
 
 const Context = React.createContext({} as ProviderStore); // type assertion on empty object
 
-class Provider extends React.Component<{}, ProviderState> {
+class Provider extends React.Component<
+  { children?: React.ReactNode },
+  ProviderState
+> {
   public readonly state = {
     themeColor: "red",
   };

docs/basic/getting-started/error-boundaries.md

@@ -16,7 +16,7 @@ If you don't want to add a new npm package for this, you can also write your own
 import React, { Component, ErrorInfo, ReactNode } from "react";
 
 interface Props {
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 interface State {

docs/basic/getting-started/forward-create-ref.md

@@ -19,7 +19,7 @@ class CssThemeProvider extends React.PureComponent<Props> {
 `forwardRef`:
 
 ```tsx
-type Props = { children: React.ReactNode; type: "submit" | "button" };
+type Props = { children?: React.ReactNode; type: "submit" | "button" };
 export type Ref = HTMLButtonElement;
 export const FancyButton = React.forwardRef<Ref, Props>((props, ref) => (
   <button ref={ref} className="MyClassName" type={props.type}>
@@ -34,7 +34,7 @@ export const FancyButton = React.forwardRef<Ref, Props>((props, ref) => (
 This was done [on purpose](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/43265/). You can make it immutable if you have to - assign `React.Ref` if you want to ensure nobody reassigns it:
 
 ```tsx
-type Props = { children: React.ReactNode; type: "submit" | "button" };
+type Props = { children?: React.ReactNode; type: "submit" | "button" };
 export type Ref = HTMLButtonElement;
 export const FancyButton = React.forwardRef(
   (

docs/basic/getting-started/portals.md

@@ -9,7 +9,7 @@ Using `ReactDOM.createPortal`:
 const modalRoot = document.getElementById("modal-root") as HTMLElement;
 // assuming in your html file has a div with id 'modal-root';
 
-export class Modal extends React.Component {
+export class Modal extends React.Component<{ children?: React.ReactNode }> {
   el: HTMLElement = document.createElement("div");
 
   componentDidMount() {
@@ -39,7 +39,7 @@ import { createPortal } from "react-dom";
 
 const modalRoot = document.querySelector("#modal-root") as HTMLElement;
 
-const Modal: React.FC<{}> = ({ children }) => {
+const Modal: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
   const el = useRef(document.createElement("div"));
 
   useEffect(() => {

docs/hoc/full-example.md

@@ -22,7 +22,7 @@ The goal is to have the props available on the interface for the component, but
 
 ```ts
 interface Props extends WithThemeProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
 }
 
 class MyButton extends React.Component<Props> {

docs/hoc/react-hoc-docs.md

@@ -68,7 +68,6 @@ function CommentList({ data }: WithDataProps<typeof comments>) {
 }
 interface BlogPostProps extends WithDataProps<string> {
   id: number;
-  // children: ReactNode;
 }
 function BlogPost({ data, id }: BlogPostProps) {
   return (