CODEWITHSUNDEEP
javascriptreactjsflowtype
maxedison
maxedison

Reputation: 17553

Flow type erroneously thinks I'm passing props to a component in a render method

Consider the following:

render(): ?React.Element<*> {
  if (this.state.error) {
    if (redirect) return <Redirect to={redirect} />;
    return <Page404 />;
  }
  ...
}

Flow is giving me the error:

property 'to'
Property not found in props of React element 'Page404'

Why does flow think I'm passing Page404 a to prop? How can I correct this?

Upvotes: 0

Views: 76

Answers (1)

Nat Mote
Nat Mote

Reputation: 4086

Since you are returning ?React.Element<*>, Flow has to replace the * with some type parameters that satisfies all possible return values. In this case, one of those type parameters is Props -- so it has to find a type it can put there that matches both Page404 and Redirect. Since they do not have matching Props, Flow cannot do this.

The simple solution is to change the return type to ?React.Element<any>. Since callers rarely care about what specific element they have, and actually just want any React element, you are not losing any safety by using any in this case.

Upvotes: 1

Related Questions