How to use React + TypeScript to render components by looping through an array?

Question

I have tried to loop over items of an array but I am missing some typing for my components in TypeScript. I have tried Card<any or Card<IProps> with the interface being defined below (not being used below).

This is the error I've gotten so far I get this error.

Type '{ key: number; card: { name: string; image: string; id: number; }; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'. Property 'card' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.

I am curious to learn what it is exactly that I am missing here?

const cards = [
  {
    name: "a",
    image: "red",
    id: 1
  },
  {
    name: "b",
    image: "blue",
    id: 2
  },
  {
    name: "c",
    image: "green",
    id: 3
  }
];

interface IProps {
  card: {
    name: string;
    image: string;
    id: number;
  };
  key: string;
}


...(Stateless component logic here)...

const renderCards = () => {
    return cards.map(card => {
      return <Card key={card.id} card={card} />;
    });
  };

  return (
    <div>

      <CardContainer>{renderCards()}</CardContainer>
    </div>
  );

Does your Card component accepts a card prop ?

JeromeBu
– JeromeBu

2019-10-24 21:15:20 +00:00
Commented Oct 24, 2019 at 21:15 — JeromeBu
– JeromeBu, Commented Oct 24, 2019 at 21:15

JeromeBu · Accepted Answer · 2019-10-24 21:21:09Z

5

I would need to see your Card component implementation, but I am guessing the following should help :

interface ICard {
  name: string;
  image: string;
  id: number;
}

interface IProps {
  card: ICard;
  key: string;
}

const cards: ICard[] = [
  {
    name: "a",
    image: "red",
    id: 1,
  },
  {
    name: "b",
    image: "blue",
    id: 2,
  },
  {
    name: "c",
    image: "green",
    id: 3,
  },
];

const Card: React.FC<{ card: ICard }> = ({ card }) => {
  return <div>{card.name}</div>;
};

const renderCards = () => {
  return cards.map(card => {
    return <Card key={card.id} card={card} />;
  });
};

return (
  <div>
    <CardContainer>{renderCards()}</CardContainer>
  </div>
);

answered Oct 24, 2019 at 21:21

JeromeBu

1,1797 silver badges13 bronze badges

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

Comments

Damian Green · Accepted Answer · 2019-10-24 21:47:56Z

0

Ensure you're including a children param in the interface of your Props

e.g.

interface CardProps {
card:{
    name: string;
    image: string;
    id: number;
  },
  children: React.ReactNode
}


const Card= ({
  card,
  children,
}: CardProps) => {
// and do whatever you like with `card` prop here
return ( {children})
}

answered Oct 24, 2019 at 21:47

Damian Green

7,5952 gold badges36 silver badges47 bronze badges

1 Comment

Damian Green Over a year ago

@Kim Lee did any answer help

Collectives™ on Stack Overflow

How to use React + TypeScript to render components by looping through an array?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related