How to type a higher order component with flow

Question

I have the following HOC:

export default (keys: Array<string>) =>
  (WrappedComponent: React.Component<*, *, *>) => (props: Object): React.Element<*> => {
    if (hasNotYetLoadedProps(keys, props)) {
      return (
        <div
          style={{
            textAlign: 'center',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100%',
          }}
        >
          <div>Loading</div>
        </div>
      )
    }
    return <WrappedComponent {... props} />
  }

that either render the original component or a loading indicator. With the actual flow type declaration I get this error:

React element `WrappedComponent`. Expected React component instead of React$Component 

in the last line. What would be the correct type of the incoming component?

Answer 1

The type needs to ReactClass<any>

export default (keys: Array<string>) =>
  (WrappedComponent: ReactClass<any>) => (props: Object): React.Element<*> => {
    if (hasNotYetLoadedProps(keys, props)) {
      return (
        <div
          style={{
            textAlign: 'center',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100%',
          }}
        >
          <div>Loading</div>
        </div>
      )
    }
    return <WrappedComponent {... props} />
  }