reactjs - ¿Cómo usar React + TypeScript para renderizar componentes recorriendo un arreglo?

He intentado recorrer los elementos de un array pero me falta algo de tipado para mis componentes en TypeScript. He intentado Card<any o Card<IProps> con la interfaz definida a continuación (no se está utilizando abajo).

Este es el error que he obtenido hasta ahora, recibo este error.

El tipo '{ key: number; card: { name: string; image: string; id: number; }; }' no se puede asignar al tipo 'IntrinsicAttributes & { children?: ReactNode; }'. La propiedad 'card' no existe en el tipo 'IntrinsicAttributes & { children?: ReactNode; }'.

Tengo curiosidad por saber qué es exactamente lo que me estoy perdiendo aquí.

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>
  );

Respuesta #1

Necesitaría ver la implementación de tu componente Card, pero supongo que lo siguiente debería ayudar:

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>
);

Respuesta #2

Asegúrate de incluir un parámetro children en la interfaz de tus Props

p. ej.

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