Typescript React fails to identify props passed to functional component, ts 2740

Question

So I'm working on a react project with typescript.

What I'm trying to achieve: display movie character data fetched from an API in the form of 1 card per character, using react functional components and typescript.

What doesn't work: it fails to compile because of typescript when trying to render a component.

To do so here is my container:

import React, { useState, useEffect } from 'react';
import { API, APILINK } from '../adapters/api';
import {Card} from '../Component/Card';

type propsDef = { cardInfo: any; displayCards: (cardData: any) => any };

export const AllCards: React.FC<propsDef> = () => {

    const [cards, setCards] = useState([]);
    const [cardsDisplay, setCardsDisplay] = useState([]);

    useEffect( () => {
        API.getAPI(`${APILINK}people/?page=1`).then(data => setCards( data ) );
    });

    const displayCards = (cardData: any) => {
        const newCards = cards.filter( card => card.name === cardData[name] )
        setCards(newCards)
        return setCardsDisplay([...cardsDisplay + cardData]);
    };

    return (
        <div>
            {
                cards.map(card => {
                    <Card cardInfo={card} displayCards={displayCards}/>
                })
            }
        </div>
    )
}

And here is my component:

type TheProps = {
    // do Type the props 
    // cardInfo: [name: string, height: string, mass: string, hair_color: string],
    name: string,
    height: string,
    mass: string, 
    hair_color: string, 
    birth_year: string, 
    gender: string, 
    homeworld: string, 
    films: string[],
    displayCards: (data: any) => any,
    cardInfo: (
    ) 
    => any
    // use arrow function and specify all params
};

export const Card: React.FC<TheProps> = ( { name, height, mass, hair_color, birth_year, gender, homeworld, films }, displayCards ) => {

    const handleClick = (data: object) => {
        return displayCards(data)
    };

    // const { name, height, mass, hair_color, birth_year, gender, homeworld, films } = cardInfo
    // const cardInfoStuff = { name:string, height:string }
    return (
        <section onClick={ e => handleClick( {name, height, mass, hair_color, birth_year, gender, homeworld, films } ) }>
            <h2> {name} </h2>
            <dl>
                <dt className="visually-hidden"> height </dt>
                <dd> {height} </dd>

                <dt className="visually-hidden"> birth_year </dt>
                <dd> {birth_year} </dd>

                <dt className="visually-hidden"> homeworld </dt>
                <dd> {homeworld} </dd>

                <dt className="visually-hidden"> mass </dt>
                <dd> {mass} </dd>

                <dt className="visually-hidden"> hair_color </dt>
                <dd> {hair_color} </dd>

                <dt className="visually-hidden"> gender </dt>
                <dd> {gender} </dd>
            </dl>
        </section>
    )
}

The current issue is that my code fails to compile on this line

cards.map(card => {
    <Card cardInfo={card} displayCards={displayCards}/>
})

And the error is gives me is on the Card class keyword:

Type '{ cardInfo: any; displayCards: (cardData: any) => void; }' is missing the following properties from type 'TheProps': name, height, mass, hair_color, and 4 more.ts(2740)

Can anyone help me out?

Answer 1

You must deconstruct your props properly. So

export const Card: React.FC<TheProps> = ( { name, height, mass, hair_color, birth_year, gender, homeworld, films }, displayCards ) => {

should be

export const Card: React.FC<TheProps> = ( { cardInfo: { name, height, mass, hair_color, birth_year, gender, homeworld, films }, displayCards }: TheProps ) => {

and then your props must map accordingly so

type TheProps = {
  cardInfo: {
    name: string;
    height: string;
    mass: string;
    hair_color: string;
    birth_year: string;
    gender: string;
    homeworld: string;
    films: string[];
  };
  displayCards: (data: any) => any;
};