I am working on a project to practice with React TS, and I am having the following error:

Type '{key: string, footballShirts: ItemInfoEntity} is not assignable to type 'IntrisicAttributes&Props. Property 'footballShirt' does not exist on type 'Intrinsic Attributes & Props'.

Well, I have been researching in Stack Overflow and Google, and all the solutions I have found tell you about using an interface, but I am already using it. Here my interface:

export interface ItemInfoEntity {
    id: string;
    picURL: string;
    title: string;
}

Here the code of the father component:

export const FootballShirtsPage: React.FC = () => {

    const [footballShirts, setFootballShirts] = useState<ItemInfoEntity[]>([]);

    useEffect(() => {
        getFootballShirts()
            .then((data) => {
                console.log(data);
                setFootballShirts(data);
            }
            );
    }, [])

    return (
        <>
            <Link to="/" className="navbar">Football Shirts</Link>
            <Link to="/videogames" className="navbar">Videogames</Link>
            <h2>Hello from Football Shirts Page</h2>
            <Card sx={{ minWidth: 275 }}>
                <CardContent>
                    {footballShirts.map((footballShirt) => (
                        <ItemInfo key={footballShirt.id} footballShirt={footballShirt} /> //ERROR: Type '{key: string, footballShirts: ItemInfoEntity} is not assignable to type 'IntrisicAttributes&Props. Property 'footballShirt' does not exist on type 'Intrinsic Attributes & Props'
                    ))}
                </CardContent>
            </Card>
        </>
    );
};

And here the code of ItemInfo:

import React from "react";

import CardMedia from "@mui/material/CardMedia/CardMedia";

import { ItemInfoEntity } from "../model/model";

interface Props {
    item: ItemInfoEntity;
}

export const ItemInfo: React.FC<Props> = (props:Props) => {

    const { item } = props;

    return (
        <div key={item.id}>
            <h1>Hello</h1>
        </div>
    );
}; 

I dont know where the mistake is, since I am using an interface in the children component. Any idea? Thanks.

CodePudding user response：

You have to match the names of your props. You are passing attribute named footballShirt to your ItemInfo component, but in your ItemInfo component, you have defined an attribute named item in your Props.

Hope this helps :).