[React] Use React.ReactNode for the children prop in React TypeScript components and Render Props

Because @types/react has to expose all its internal types, there can be a lot of confusion over how to type specific patterns, particularly around higher order components and render prop patterns. The widest and most recommended element type is React.ReactNode, and we build up to it by explaining the edge cases.

 

For render prop:

type ButtonProps = {
  label?: string;
  children: (b: boolean) => React.ReactNode;
};

function App() {
  return (
    <Button>
      {isOn => (isOn ? <div> Turn off</div> : <div> Turn on</div>)}
    </Button>
  );
}

type ButtonProps = {
  label?: string;
  children: React.ReactNode;
};
type ButtonState = {
  isOn: boolean;
};
class Button extends React.Component<ButtonProps, ButtonState> {
  static defaultProps = {
    label: "Hello World!"
  };
  state = {
    isOn: false
  };

  toggle = () => this.setState({ isOn: !this.state.isOn });

  render() {
    const { label, children } = this.props;
    const { isOn } = this.state;
    const style = {
      backgroundColor: isOn ? "red" : "green"
    };
    return (
      <button style={style} onClick={this.toggle}>
        {children(isOn)}
      </button>
    );
  }
}

 

For React children projection:

type ButtonProps = {
  label?: string;
  children: React.ReactNode;
};