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

Gabor Szekely · Accepted Answer · 2019-10-13 22:59:45Z

4

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

edited Oct 13, 2019 at 22:59

answered Oct 13, 2019 at 22:54

Gabor Szekely

1,2588 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

johnnyshrewd Over a year ago

God dam it :)) Thank you, makes sense.

Hamza El Aoutar · Accepted Answer · 2019-10-13 23:01:40Z

0

This is type definition of SFC: it expects you to return a ReactElement or null, while you are returning Element[].

type SFC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement | null;
  ...
}

You can use React fragments:

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

answered Oct 13, 2019 at 23:01

Hamza El Aoutar

5,6973 gold badges20 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to write a React Stateless Functional Component in Typescript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related