CODEWITHSUNDEEP
reactjstypescripttsx
MarkEAG
MarkEAG

Reputation: 1

how do i pass props in react with tsx and nextjs

so the code keeps sending me these 2 errors Property 'posts' does not exist on type '{}'. Parameter 'post' implicitly has an 'any' type.

const Home: NextPage = ( { posts } ) => {
  return (
    <div className="container mx-auto px-10 mb-8 bg-gray-300">
      <Head>
        <title>financial blog</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
        <div className="lg:col-span-8 col-span-1:">
        <div className='grid grid-cols-1 lg:grid-cols-12 gap-12'>
          {posts.map((post)=><PostCard post={post.node}  key={post.title} />)} 
          </div>
          <div className="lg:col-span-4 col-span-1">
            <div className="lg:sticky relatve top-8">
              <PostWidget/>
              <Categories/>
            </div>
          </div>
        </div>
        

    </div>
  )
}

export default Home

Upvotes: 0

Views: 1266

Answers (1)

Alonso Pablo
Alonso Pablo

Reputation: 136

First you need pass props like:

<Home posts={post} />

Second you need declare the type of content inside of post. (Hence the error: "Parameter 'post' implicitly has an 'any' type.")

//...
// this is an example
interface Post {
 title: string;
 content: string;
 author: string;
}

interface HomeProps {
 posts: Post[];
}

const Home: NextPage = ( { posts }: HomeProps ) => {
//...

Remember that "posts" has to be an array (const posts = [ ... ]) and not an object (const posts = { ... })

Upvotes: 2

Related Questions