Render Props, Function as a Child, and Higher Order Components

Here is a neat little trick. If you ever need a higher-order component but you only have a Function as a Child or render prop component, you can turn these into a higher order component like this:

function withCryptoPrices(WrappedComponent) {
  return class extends React.Component {
    render() {
      return (
        <CryptoPrices limit={5}>
          {(cryptoPriceProps) => (
            <WrappedComponent {...this.props} {...cryptoPriceProps} />
          )}
        </CryptoPrices>
      );
    }
  };
}

Let’s implement this into an executable code.