Search code examples
reactjstypescriptreact-typescript

React Typescript issue


`issue: The expected type comes from property 'listing' which is declared here on type 'IntrinsicAttributes & ListingClientProps'

I've tried many things but still not working

SafeListing and SafeUser are Types.. and I don't get why I'm getting error can anyone help with that?

ListingClient.tsx


interface ListingClientProps {
   reservations?: SafeReservation[];
   listing: SafeListing & {
      user: SafeUser;
   };
   currentUser?: SafeUser | null;
}

const ListingClient: React.FC<ListingClientProps> = ({
   listing,
   currentUser,
   reservations = [],
}) => {
// rest of the code
}

page.tsx

import getCurrentUser from "@/app/actions/getCurrentUser";
import getListingById from "@/app/actions/getListingById";
import ClientOnly from "@/app/components/ClientOnly";
import EmptyState from "@/app/components/EmptyState";
import ListingClient from "./ListingClient";
import getReservations from "@/app/actions/getReservation";

interface IParams {
   listingId?: string;
}

const ListingPage = async ({ params }: { params: IParams }) => {
   const listing = await getListingById(params);
   const reservations = await getReservations(params);
   const currentUser = await getCurrentUser();

   if (!listing) {
      return (
         <ClientOnly>
            <EmptyState />
         </ClientOnly>
      );
   }

   return (
      <ClientOnly>
         <ListingClient listing={listing} currentUser={currentUser} reservations={reservations} />
      </ClientOnly>
   );
};

export default ListingPage;

types.ts

import { Listing, Reservation, User } from "@prisma/client";

export type SafeListing = Omit<Listing, "createdAt"> & {
   createdAt: string;
};

export type SafeReservation = Omit<
   Reservation,
   "createdAt" | "startDate" | "endDate" | "listing"
> & {
   createdAt: string;
   startDate: string;
   endDate: string;
   listing: SafeListing;
};

export type SafeUser = Omit<User, "createdAt" | "updatedAt" | "emailVerified"> & {
   createdAt: string;
   updatedAt: string;
   emailVerified: string | null;
};

`

ERORR MESSAGE

[{ "resource": "/Users/macbook/Desktop/projects_new/airbnb-clone/app/listings/[listingId]/page.tsx", "owner": "typescript", "code": "2322", "severity": 8, "message": "Type '{ createdAt: string; user: { createdAt: string; updatedAt: string; emailVerified: (() => string) | null; id: string; name: string | null; email: string | null; image: string | null; hashedPassword: string | null; favoriteIds: string[]; id_token: string | null; }; ... 10 more ...; price: number; }' is not assignable to type 'Omit<{ id: string; title: string; description: string; imageSrc: string; createdAt: Date; category: string; roomCount: number; bathroomCount: number; guestCount: number; locationValue: string; userId: string; price: number; }, "createdAt"> & { ...; } & { ...; }'.\n Type '{ createdAt: string; user: { createdAt: string; updatedAt: string; emailVerified: (() => string) | null; id: string; name: string | null; email: string | null; image: string | null; hashedPassword: string | null; favoriteIds: string[]; id_token: string | null; }; ... 10 more ...; price: number; }' is not assignable to type '{ user: SafeUser; }'.\n Types of property 'user' are incompatible.\n Type '{ createdAt: string; updatedAt: string; emailVerified: (() => string) | null; id: string; name: string | null; email: string | null; image: string | null; hashedPassword: string | null; favoriteIds: string[]; id_token: string | null; }' is not assignable to type 'SafeUser'.\n Type '{ createdAt: string; updatedAt: string; emailVerified: (() => string) | null; id: string; name: string | null; email: string | null; image: string | null; hashedPassword: string | null; favoriteIds: string[]; id_token: string | null; }' is not assignable to type '{ createdAt: string; updatedAt: string; emailVerified: string | null; }'.\n Types of property 'emailVerified' are incompatible.\n Type '(() => string) | null' is not assignable to type 'string | null'.\n Type '() => string' is not assignable to type 'string'.", "source": "ts", "startLineNumber": 27, "startColumn": 25, "endLineNumber": 27, "endColumn": 32, "relatedInformation": [ { "startLineNumber": 49, "startColumn": 4, "endLineNumber": 49, "endColumn": 11, "message": "The expected type comes from property 'listing' which is declared here on type 'IntrinsicAttributes & ListingClientProps'", "resource": "/Users/macbook/Desktop/projects_new/airbnb-clone/app/listings/[listingId]/ListingClient.tsx" } ] }]


Solution

  • solved problem,

    npx prisma db push
    

    changed my prisma schema.