Flow type error when using React.Node

Question

I have written a utility function that I like but for some reason I am unable to get achieve the flow typing for it. The below code is producing errors.

// @flow
import React from 'react';
import type { Node } from 'react';

export const partializeComponent = (partialProps: any) =>
  (Component: Node) =>
    (props: any): Node => (
      <Component
        {...partialProps}
        {...props}
      />
    );

Since the error was very verbose, I have taken a screenshot instead

Answer 1

Your problem is you're using the type Node incorrectly when applied to your argument component. The type Node represents a JSX element e.g. .... It is the correct return type for a React components render method.

In fact you should use the type ComponentType and a pass a Prop type to reflect the component's implementation.

I've updated your example, filled in some blanks for you to get on your way.

// @flow
import React from 'react';
import type { ComponentType, Node } from 'react';

type PartialProps = {
  prop1: string,
  prop2: number,
};

type Props = PartialProps & {
  otherProps: string,
};

export const partializeComponent = (partialProps: PartialProps) =>
  (Component: ComponentType<Props>) =>
    (props: Props): Node => (
      <Component
        {...partialProps}
        {...props}
      />
    );

Please note this is not tested, it's from memory.