I have an array of objects like:-

const data = {
"Large_Plates": [
    {
      "name": "Cauliower/ Shanghai Fried rice with stir fry vegetables",
      "id": "1",
      "price_Veg": "545",
      "price_Lamb": null,
      "price_Chicken": null,
      "price_SeaFood": null,
      "Desp": "A vegan & gluten free scrumptious and healthy meal"
    },
],
"Salads": [
    {
      "name": "Vietnamese Noodle Salad",
      "id": "1",
      "price_Veg": "439",
      "price_Chicken": "488",
      "price_SeaFood": "549",
      "Desp": "Rice noodles, vegetables, oriental relish"
    }
],
"Tea_Coffe": [
    { "name": "Immunity Tea", "id": "1", "price": "209" }
]
}

For this I have created an interface like :-

interface FoodProps {
    name:string,
    id:string,
    Desp?:string |null,
    price?:string,
    price_Veg?:string |null,
    price_Chicken?:string| null,
    price_SeaFood?:string| null,
    price_Lamb?:string |null
  }

But when I am trying to do (in React with TS)

{data[SelectMenuItem].map((singlefooditem: FoodProps) => {
            return (
              <>
                <FoodItem
                  singlefooditem={singlefooditem}
                  key={singlefooditem.id}
                />
              </>
            );
          })}

and get this on another component :-

const FoodItem = ({ singlefooditem }: FoodProps) => {
  console.log(singlefooditem);
  return (
    <div className="food-item-container">
      <div className="top-food-item">
        <div className="name-fi">{singlefooditem.name}</div>
        <div className="descp-fi"></div>
      </div>
      <div className="bot-food-item">
        <div className="veg-fi"></div>
        <div className="chicken-fi"></div>
        <div className="seafood-fi"></div>
        <div className="lamb-fi"></div>
      </div>
    </div>
  );
};

I am getting an error like :

1. on FoodItem component - Property 'singlefooditem' does not exist on type 'FoodProps'.ts(2339)

2. on Parent component - Type '{ singlefooditem: FoodProps; key: string; }' is not assignable to type 'IntrinsicAttributes & FoodProps'. Property 'singlefooditem' does not exist on type 'IntrinsicAttributes & FoodProps'.ts(2322)

Please let me know why is this happening as interface is correct and I am just trying to prop drill!!

CodePudding user response：

Use type props or interface for the FoodItem component.

type FoodItemProps = {
  singlefooditem: FoodProps
}

const FoodItem: FC<FoodItemProps> = ({ singlefooditem }) => {
  console.log(singlefooditem);
  return (
    <div className="food-item-container">
      <div className="top-food-item">
        <div className="name-fi">{singlefooditem.name}</div>
        <div className="descp-fi"></div>
      </div>
      <div className="bot-food-item">
        <div className="veg-fi"></div>
        <div className="chicken-fi"></div>
        <div className="seafood-fi"></div>
        <div className="lamb-fi"></div>
      </div>
    </div>
  );
};

FC is the type of Functional Component, exported from react.

and if you want use one-liner

const FoodItem = ({ singlefooditem }: { singlefooditem: FoodProps }) => {

Thanks