0

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> = () => {

1 Answer 1

1

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}/>)}
7
  • 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; }'.
    – C H
    Dec 4, 2021 at 0:05
  • @CH yeah, your ListCard component only takes one prop: an object of type {cards: ICard}. It doesn't expect the props you're passing it Dec 4, 2021 at 0:58
  • thats my problem :,) I would like to get the props from ICards AND from ICardsItem. (the first code i've send
    – C H
    Dec 4, 2021 at 10:36
  • No, I'm not sure what you mean. There's only one type of object you're going to get from a map() function on the cards.items array, and that is an object that looks like { cards: ICards }. Dec 4, 2021 at 18:40
  • Looking at this closer, why don't you just change the ListCard component's props to one ICardItem? That seems to be (if I'm understanding correctly) what you want... ? Dec 4, 2021 at 18:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.