ahstro ahstro - 1 month ago 6
React JSX Question

What is the Flow return type of a React stateless function?

If I have something like this

const RandomComponent = (props) => (
<div>
<SomeSubComponent id={props.id} />
<AnotherSubComponent type={props.type} />
</div>
)


how will I type annotate the return type with Flow, i.e., what should replace
/* ??? */
in the code below?

const RandomComponent = (props: { id: string, vino: number): /* ??? */ => (
<div>
<SomeSubComponent id={props.id} />
<AnotherSubComponent veryImportantNumber={props.vino} />
</div>
)


Edit: This is what the Flow docs has to say about stateless functions. I may be blind, but I can't see anything about a return type there, only prop types.

Answer

The return type of a pure component (which is the same type of the render function of a normal component) is ?React$Element<any>.

As you can read in its definition React$Element has a type parameter Config which is not very useful per se and it's there only for consistency with the definition of ReactClass.

So your definition can be written as

const RandomComponent = (props: { id: string, vino: number }): React$Element<any> => (
  <div>
    <SomeSubComponent id={props.id} />
    <AnotherSubComponent veryImportantNumber={props.vino} />
  </div>
)

or if you prefer

import type { Element } from 'react'

const RandomComponent = (props: { id: string, vino: number }): Element<any> => (
  <div>
    <SomeSubComponent id={props.id} />
    <AnotherSubComponent veryImportantNumber={props.vino} />
  </div>
)
Comments