Map an array in an object Typescript/React

Question

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

Brendan Bond · Accepted Answer · 2021-12-03 23:51:25Z

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}/>)}

answered Dec 3, 2021 at 23:51

Brendan Bond

1,8901 gold badge11 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

C H Over a year ago

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; }'.

Brendan Bond Over a year ago

@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

C H Over a year ago

thats my problem :,) I would like to get the props from ICards AND from ICardsItem. (the first code i've send

Brendan Bond Over a year ago

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 }.

Brendan Bond Over a year ago

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... ?

|

Collectives™ on Stack Overflow

Map an array in an object Typescript/React

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related