How to write a React Stateless Functional Component in Typescript?

Question

I have this:

import React, { useReducer } from 'react';
import { Item, List } from '../Types';

type Props = {
    items: List;
};

const TodoList: React.SFC<Props> = ({ items, children }) => {
    return items.map((item: Item) => <div key={item.id}>{item.id}</div>);
};

export default TodoList;

I keep getting:

Type '({ items, children }: PropsWithChildren) => Element[]' is not assignable to type 'FunctionComponent'. Type 'Element[]' is missing the following properties from type 'ReactElement ReactElement Component)> | null) | (new (props: any) => Component)>': type, props, key

Answer 1

The issue is that you are trying to return an array of elements in your JSX. In React, you can only return a single parent element which then needs to wrap the rest of your elements. So try changing

return items.map((item: Item) => <div key={item.id}>{item.id}</div>);

to

return (
    <div>
        {items.map((item: Item) => <div key={item.id}>{item.id}</div>)}
    </div>
)

If you would prefer not to have the extra div, you can also wrap your list items with a Fragment. In that case, you would do:

return (
    <React.Fragment>
        {items.map((item: Item) => <div key={item.id}>{item.id}</div>)}
    </React.Fragment>
)