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 try to pass props from the cards?.items.map
only I don't know what is the right one to get the information from cards.items
(cards.items is declared in the file cards.decl.ts
)
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[];
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.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: ICardItem) => {
<ListCard
key={card.id}
id={card.id}
img={card.img}
gender={card.gender}
name={card.name}
/>;
})}
</div>
</section>
);
};
export default Cards;
ListCard.tsx
import React, { FC, useState } from "react";
import { useGlobalContext } from "../../context";
import { ICardItems, ICards } from "../../decl";
import "./ListCard.css";
export interface CardsProps {
cards: ICards | undefined;
}
const ListCard: React.FC<CardsProps> = () => {
CodePudding user response:
I'm not super clear on what you're asking here, but I do see a problem with your map function - it doesn't return anything!
Change
{cards?.items.map((card: ICardItem) => {
<ListCard
key={card.id}
id={card.id}
img={card.img}
gender={card.gender}
name={card.name}
/>;
})}
to
{cards?.items.map((card: ICardItem) => {
return <ListCard
key={card.id}
id={card.id}
img={card.img}
gender={card.gender}
name={card.name}
/>;
})}
You might have been confused by arrow function syntax, which would look like
{cards?.items.map((card: ICardItem) => <ListCard key={card.id} id={card.id} img={card.img} gender={card.gender} name={card.name}/>)}
CodePudding user response:
I corrected what u said, indeed it's better !
For the ListCard component called in the map, I get this message :
Element ListCard doesn't have required attribute cards And for the props declared in ListCard (id, img, gender...)
I get this :
TS2322: Type '{ key: number; id: number; img: string; gender: string; name:
string; }' is not assignable to type 'IntrinsicAttributes & CardsProps & {
children?: ReactNode; }'. Property 'id' does not exist on type
'IntrinsicAttributes & CardsProps & { children?: ReactNode; }'.