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 functional components. I may be blind, but I can't see anything about a return type there, only prop types.

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 functional components. I may be blind, but I can't see anything about a return type there, only prop types.

• javascript
• reactjs
• typing
• flowtype
• static-typing

• Why would you like to specify a return type? It's a component, so wouldn't you always return its elements? – César Landesa Commented Nov 3, 2016 at 7:43
• 1 I'd like to do it because of consistency with other function declarations and because sometimes a component can return null or a component, but the question is really one of curosity, and I suppose it's really "what is the type of a JSX block/the return type of React.createElement?" – dontexist Commented Nov 3, 2016 at 7:57

3 Answers 3

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>
)

or even

import React from 'react'

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

Turns out it's React.Element, which is a polymorphic type (which I'm not 100% sure what it means), so the correct (enough) code would be

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

Depending on your .flowconfig, setting React$Element<any> as the return type may throw the following error:

error Unexpected use of weak type "any" flowtype/no-weak-types

To avoid this, either pass no type at all:

type PropsType = { foo: string }

const Baz = (props: PropsType): React$Element =>
  <h1>Hello, { props.foo }</h1>

Or, pass a props type alias, instead of any:

type PropsType = { foo: string }

const Baz = (props: PropsType): React$Element<PropsType> =>
  <h1>Hello, { props.foo }</h1>