Typescript - React Error TS2322: Type 'AppState | undefined' is not assignable to type &#0-CodePudding

I'm new on typescript and React. The project idea is to catch some information from a JSon file I created (back) and to display them on cards (front). I've managed to have the informations and to display them in an array, the goal now is to put this in form with reactJs. But I have the following error :

TS2322: Type 'AppState | undefined' is not assignable to type 'ICards | undefined'. Type 'AppState' is missing the following properties from type 'ICards': title, items, urlSuffixe Cards.tsx(8, 3): The expected type comes from property 'cards' which is declared here on type 'IntrinsicAttributes & CardsProps'.

What did go wrong ?

Cards.tsx :

import React, { FC, useState } from "react";
import ListCard from "../ListCard/ListCard";
import { getCards } from "../../api/index";
import { ICardItems, ICards } from "../../decl";
import "./Cards.css";

export interface CardsProps {
  cards: ICards | undefined;
}

const Cards = ({ cards }: CardsProps) => {
  return (
    <section className="section cards">
      <div className="cards__wrap container">
        <div className="section__title">
          <h1>{cards?.title}</h1>
        </div>
        {cards?.items.map((card: any) => {
          <ListCard key={card.id} {...card} />;
        })}
        {/*<div className="cards__list">*/}
        {/*  <div className="cards_list_container">*/}
        {/*    <ListCard />*/}
        {/*    <ListCard />*/}
        {/*    <ListCard />*/}
        {/*    <ListCard />*/}
        {/*    <ListCard />*/}
        {/*    <ListCard />*/}
        {/*    <ListCard />*/}
        {/*    <ListCard />*/}
        {/*    <ListCard />*/}
        {/*    <ListCard />*/}
        {/*  </div>*/}
        {/*</div>*/}
      </div>
    </section>
  );
};

export default Cards;

Home.tsx :

import React, { useState, useEffect } from "react";
import axios from "axios";
import Cards from "../Cards/Cards";
import { ICardItems, ICards } from "../../decl";
import { getCards } from "../../api";
import "./Home.css";

interface AppState {
  cards: ICards | undefined;
}

const Home = () => {
  const [appCards, setAppCards] = useState<AppState>();

  const fetchCards = async () => {
    const cardsPages = await getCards();
    setAppCards({ cards: cardsPages });
  };
  console.log(appCards);

  useEffect(() => {
    fetchCards();
  }, []);

  return (
    <div className="home">
      <Cards cards={appCards} />
    </div>
  );
};

export default Home;

cards.decl.ts :

    export type ICards = {
  title: string;
  items: ICardItems;
  urlSuffixe: string;
};

export type ICardItem = {
  id: number;
  img: string;
  gender: string;
  name: string;
};

export type ICardItems = ICardItem[];

CodePudding user response：

Use

 <Cards cards={appCards.cards} />

instead of

<Cards cards={appCards} />

Cards expects a prop cards of type ICards and you are passing appCards which is of type AppState.