Stream error when passing props using stream-sorted higher-order elements

Consider the following code. Wrapper1

displays Wrapper2

, passing it a component Final

as a prop, as well as a couple of props, which ultimately Final

, finalProp

and w2prop

. Wrapper2

then passes the component passed into it, passing all of its props to that processed component. In this case, the component Final

gets rendered Wrapper2

and it gets the required props.

However, Flow doesn't understand this. I am getting the following two errors:

• Property finalProp
  
  Property not found in object type See also: react elementWrapper2
  
  
• Property w2prop
  
  Property not found in object type See also: react elementWrapper2
  
  

type FinalT = {
  finalProp: number,
  w2prop: number,
};

function Final(props: FinalT): React.Element<*> {
  return (
    <div>
      {props.finalProp}
      {props.w2prop}
    </div>
  );
}

export default function Wrapper1(): React.Element<*> {
  return (
    <Wrapper2
      component={Final}
      finalProp={7}
      w2prop={7}
    />
  );
}

type Wrapper2T = {
  component: (*) => React.Element<*>,
};

function Wrapper2(props: Wrapper2T): React.Element<*> {
  const Cmp = props.component;

  return <Cmp {...props} />;
}

      

        
        
        
      

    

Based on the error message, Flow clearly knows what the Final

rendering is getting Wrapper2

. However, he does not understand that the required details are provided. I find this strange. If it can be said that props.component

in Wrapper2

there Final

, then I would expect him to know the fullness of that props

.

If I add finalProp

and w2prop

to type Wrapper2T

, then Flow is happy. But it is not a starter as it Wrapper2

should be a higher order component that is agnostic as to which component it ultimately renders.

Is there any other way that I should annotate these types of streams? Or another template for creating and rendering these components? I think what I have above is the standard model in React, so there must be some kind of solution.