Type '({Articles}: propswithchildren <Todoprops>) => Elément []' n'est pas assignable à tapisser 'FonctionComponce <Todoprops>'

Question

J'apprends dossier-réact et je suis coincé dans cette erreur Type '({ items }: PropsWithChildren<TodoProps>) => Element[]' is not assignable to type 'FunctionComponent<TodoProps>' et je suis perdu à ce sujet.

Erreur complète:

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

Lien pour le code: Sandbox Repo .

L'erreur se produit sur la déclaration de TodoList fonction dans le TodoList.tsx fichier.

Toute aide est appréciée. Acclamations!

---

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

J'ai rencontré une erreur similaire. Finalement, j'ai remarqué que j'avais renommé le fichier de manière incorrecte à partir de .js à .ts au lieu de .tsx lors de la conversion d'un composant en une fonction de fonctionnement avec Typecript.