Property 'Post' does not exist on type 'IntrinsicAttributes'. or not assignable to type 'IntrinsicAttributes'

Question

import Head from 'next/head';
import { PostCard, Categories, PostWidget } from '../components'

const posts = [
 {
title: "React Testing",
excerpt: "Learn React Testing"
},

{
title: "React with Tailwind",
excerpt: "Learn React with Tailwind",
},
];


export default function Home() {
return (
<div className="container mx-auto px-10 mb-8">
  <Head>
    <title>Create Next App</title>
    <link rel="icon" href="/favicon.ico" />
  </Head>

  <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
    <div className="lg:col-span-8 col-span-1">

      {posts.map((post) => <PostCard post={post} key={post.title} />)}


    </div>
    <div className="lg:col-span-4 col-span-1">
      <div className="lg:sticky relative top-8">
        <PostWidget />
        <Categories />
      </div>
    </div>
  </div>
</div>
)}

Error is

Type '{ post: { title: string; excerpt: string; }; key: string; }' is not assignable to type 'IntrinsicAttributes'. Property 'post' does not exist on type 'IntrinsicAttributes'.ts(2322)

Please trim your code to make it easier to find your problem. Follow these guidelines to create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). — HP371, Oct 15 '22 at 13:12

score 0 · Answer 1 · answered Oct 14 '22 at 17:15

It's complaining about key prop to be a string whereas it is passed with an object ..

change it to something as below and key should be some unique prop amongst the list...

<div className="lg:col-span-8 col-span-1">
  {posts.map((post) => <PostCard post={**post.some_unique_propname**} key={post.title} />)}
</div>

Property 'Post' does not exist on type 'IntrinsicAttributes'. or not assignable to type 'IntrinsicAttributes'

Error is

1 Answers1