输入 '({ items }: PropsWithChildren<todoprops> ) => Element[]' 不可分配给类型 'FunctionComponent<todoprops> '</todoprops></todoprops>

Question

I'm learning Typescript-react and I'm stuck in this error Type '({ items }: PropsWithChildren<TodoProps>) => Element[]' is not assignable to type 'FunctionComponent<TodoProps>' and I am lost on this.

Complete error:

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

Link for code: sandbox repo .

Error happens on the declaration of TodoList function within the TodoList.tsx file.

Any help is appreciated. Cheers!

---

Code:

import React from "react";

interface Todo {
  id: number;
  content: string;
  completed: boolean;
}

interface TodoProps {
  items: Todo[];
}

//    v------v here is error
const TodoList: React.FC<TodoProps> = ({ items }) => {
  return items.map((item: Todo) => <div key={item.id}>{item.id}</div>);
};

export default TodoList;

Answer 1

Yeah, the error may sound a bit confusing - in essence it says that you can only return a single ReactElement or its equivalent JSX.Element in the function component definition, enforced by React.FC type.

React Fragments solve this limitation, so you can write TodoList in the following manner :

interface TodoProps {
  items: Todo[];
}

const TodoList: React.FC<TodoProps> = ({ items }) => (
  <React.Fragment>
    {items.map((item: Todo) => (
      <div key={item.id}>{item.id}</div>
    ))}
  </React.Fragment>
);

Short form:

 const TodoList: React.FC<TodoProps> = ({ items }) => ( <> {items.map(({ id }) => <div key={id}>{id}</div>)} </> );

By the way: With pure JS, both class and function components can return multiple elements in an array as render output. Currently, TS has a type incompatibility for returned arrays in function components, so Fragments provide a viable workaround here (in addition to type assertions ).

Answer 2

I've encountered a similar error. Eventually I noticed that I'd renamed the file incorrectly from.js to.ts instead of to.tsx when converting a component to a FunctionComponent with TypeScript.

Answer 3

I also got this error when I was trying to return children props from my Loading component like below.

    const { loading, children } = props;
    return loading ? <p>Loading ... </p> : children;

Then i realize that React is expecting only one return value(1 parent component) from its render method. Therefore I wrapped children props with React.Fragment which is denoted by <></> and that solves my problem. Below is my Loading component sample, hope that helps someone else.

import { FunctionComponent } from "react";

interface ILoadingProps {
  loading: boolean;
}
export const Loading: FunctionComponent<ILoadingProps> = (props) => {
  const { loading, children } = props;
  return loading ? <p>Loading ... </p> : <>{children}</>;
};

Answer 4

My problem was that I had allowed a "TypeScript Quick Fix" in VSCode to add async to the main functional component interface.

const Welcome: React.FC<TProps> = async (props) => {

After removing it,

const Welcome: React.FC<TProps> = (props) => {

things were back to normal.