CODEWITHSUNDEEP
reactjstypescript
Sergio Gordillo
Sergio Gordillo

Reputation: 123

Type {} is not assignable to type intrinsic attributes and props React + TS

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.

Upvotes: 0

Views: 996

Answers (1)

dr0nda
dr0nda

Reputation: 133

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 :).

Upvotes: 1

Related Questions