How to introduce a higher order component with a stream

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} /> } 

which either display the source component or the load indicator. With the actual declaration of the stream type, I get this error:

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

in the last line. What will be the correct type of input component?

Answer 1

Type must 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} /> }