0

When I try to run the code it gives me this error=

TypeError: Cannot read properties of undefined (reading 'map')

I dont know how to solve this

import React from 'react'
import { Tweet } from '../typings'
import TweetBox from './TweetBox'
import TweetComponent from '../components/Tweet'

interface Props {
  tweets: Tweet[]
}

function Feed({ tweets }: Props) {
  return (
    <div className='col-span-7 lg:col-span-5 border-x'>
      <div className="flex items-center justify-between">
          <h1 className="p-5 pb-0 text-xl font-bold">Home</h1>
          <RefreshIcon className='h-8 w-8 cursor-pointer text-twitter mr-5 mt-5 transition-all duration-500 ease-out hover:rotate-180 active:scale-125'/>
      </div>
      
      <div>
        <TweetBox />
      </div>

      {/* Feed */}
      <div>
        {tweets.map((tweet) => (
          <TweetComponent key={tweet._id} tweet={tweet} />
        ))}
      </div>
    </div>
  )
}

export default Feed ```
VoicedCreator
  • 1

3 Answers3

1

tweets array that you try to map is probably empty on render.

Alon Barenboim
  • 428
  • 3
  • 11
0

go to your index.tsx file and make sure when you are calling you feed component, you push the tweets prop through:

<Feed tweets={tweets}/>

here is the full index.tsx file below

import type { GetServerSideProps, NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import Feed from '../components/Feed'
import Sidebar from '../components/Sidebar'
import Widgets from '../components/Widgets'
import { Tweet } from '../typings'
import { fetchTweets } from '../utils/fetchTweets'


interface Props{
  tweets: Tweet[]
}

const Home = ({tweets}: Props) => {
  console.log(tweets)

  return (
    <div className="lg:max-w-6xl mx-auto max-h-screen overflow-hidden">
      <Head>
        <title>Twitter 2.0</title>
      </Head>

      
      <main className='grid grid-cols-9'>
        
      <Sidebar/>

      <Feed tweets={tweets}/>
      
      <Widgets />
      </main>
    </div>
  )
}

export default Home

export const getServerSideProps: GetServerSideProps = async (context) => {
  const tweets = await fetchTweets()

  return {
    props: {
      tweets,
    }
  }
}
prensj
  • 3
  • 4
0

It wont work if you use it in components folder it will just work for pages folder in NextJS or ReactJs

Mohammed J
  • 1