flow-generics-with-react-components.js

// @flow

import React, {type ComponentType, type AbstractComponent} from 'react';

////////////////////////////
// A generic list component
////////////////////////////

type ListProps<P> = {|
    component: ComponentType<P>,
    items: Array<P>,
|};

const List = <P>(props: ListProps<P>) => {
    const {component: Component, items} = props;

    return items.map(item => (
        <Component {...item}/>
    ));
};

////////////////
// A list item
////////////////

type CarProps = {|
    model: string,
|};

const Car = (props: CarProps) => {
    return <div>props.model</div>;
};

///////////////////
// The concrete list
///////////////////

type CarsListProps = {
    cars: Array<CarProps>,
};

const CarsList = (props: CarsListProps) => {
    return <List component={Car} items={props.cars}/>
};