I want to pass an array(initialPosts) using getServerSideProps into my Home function . But the props are undefined. I have looked through many solutions but none of them works.
I have used initialPosts as props in getserversideprops , in it the array data is present. I have used posts to store initialPosts props in Home function and a map function named posts.map().
Error is on the line post.map() in Home function.
Error: "TypeError: Cannot read properties of undefined (reading 'map')"
import Header from '../component/header'
import { useState } from 'react'
export async function getServerSideProps(context){
return{
props:{
initialPosts: [
{
user: "Dilpreet",
profile: 'img/dilpreet.jpg',
url: 'img/meme.jpg',
caption: "New meme i found #thor",
comment_user: "Manik",
comment: "my dentist to me :))",
},
{
user: "Manik",
profile: 'img/dilpreet.jpg',
url: 'img/meme2.jpg',
caption: "New meme i found #alien",
comment_user: "Manik",
comment: "my dentist to me :))",
},
{
user: "Dilpreet",
profile: 'img/dilpreet.jpg',
url: 'img/meme3.jpg',
caption: "New meme i found #himanshu",
comment_user: "Manik",
comment: "my dentist to me :))",
}
],
},
}
}
function Home(props){
const [posts,setPosts] = useState(props.initialPosts)
return(
<div className='m-3'>
{/* Header */}
<Header />
{/* Main */}
<section className='flex flex-row'>
<div className='w-1/2 h-screen'></div>
<div className='w-1/2 bg-emerald-300 flex flex-row'>
{/* <Feed posts={initialPosts} /> */}
<div className="flex flex-col overflow-auto scroll-smooth no-scrollbar h-screen w-full rounded-xl">
{
posts.map((n) => {
return(
<>
<div className="flex flex-row mx-auto">
{/* User post */}
<div className='flex flex-col mb-16 rounded-xl bg-slate-100 shadow-xl shadow-bg-slate-300'>
{/* User post content */}
<div className='flex flex-col'>
{/* User profile */}
<div className='flex flex-row items-center mx-4 mt-3'>
{/* Profile pic of user */}
<div className='relative inline-block'>
<img class="inline-block object-cover w-12 h-12 rounded-full" src={n.profile}></img>
<span class="absolute bottom-0 right-0 inline-block w-3 h-3 bg-green-600 border-2 border-white rounded-full"></span>
</div>
{/* UserName */}
<h1 className="mx-2">{n.user}</h1>
{/* Status */}
<div></div>
</div>
{/* Post */}
<div className='mx-auto'>
<img className="h-[768px] w-[768px] object-contain" src={n.url}></img>
</div>
</div>
{/* User post caption */}
<div className="my-5 mx-3">
{n.caption}
</div>
{/* Buttons */}
<div className="flex flex-row p-4">
<button className="w-1/3">Like</button>
<button className="w-1/3">Comment</button>
<button className="w-1/3">Send</button>
</div>
</div>
</div>
</>
)
})
}
</div>
</div>
</section>
</div>
)
}
export default Home
My _app.js file:
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
The code below is tested & working.
If you CTRL+C & CTRL+V this code and it doesn't work it means you have errors in settings/params
import * as React from "react";
import { useState } from "react";
export default function Home(props){
const [posts,setPosts] = useState(props.initialPosts)
//all is good, data is passing to your Home component
console.log(posts)
return(
<div className='m-3'>
{/* Main */}
<section className='flex flex-row'>
<div className='w-1/2 h-screen'></div>
<div className='w-1/2 bg-emerald-300 flex flex-row'>
{/* <Feed posts={initialPosts} /> */}
<div className="flex flex-col overflow-auto scroll-smooth no-scrollbar h-screen w-full rounded-xl">
{
posts.map((n) => {
return(
<>
<div className="flex flex-row mx-auto">
{/* User post */}
<div className='flex flex-col mb-16 rounded-xl bg-slate-100 shadow-xl shadow-bg-slate-300'>
{/* User post content */}
<div className='flex flex-col'>
{/* User profile */}
<div className='flex flex-row items-center mx-4 mt-3'>
{/* Profile pic of user */}
<div className='relative inline-block'>
<img className="inline-block object-cover w-12 h-12 rounded-full" src={n.profile} />
<span className="absolute bottom-0 right-0 inline-block w-3 h-3 bg-green-600 border-2 border-white rounded-full"></span>
</div>
{/* UserName */}
<h1 className="mx-2">{n.user}</h1>
{/* Status */}
<div></div>
</div>
{/* Post */}
<div className='mx-auto'>
<img className="h-[768px] w-[768px] object-contain" src={n.url}></img>
</div>
</div>
{/* User post caption */}
<div className="my-5 mx-3">
{n.caption}
</div>
{/* Buttons */}
<div className="flex flex-row p-4">
<button className="w-1/3">Like</button>
<button className="w-1/3">Comment</button>
<button className="w-1/3">Send</button>
</div>
</div>
</div>
</>
)
})
}
</div>
</div>
</section>
</div>
)
}
export async function getServerSideProps(context){
return{
props:{
initialPosts: [
{
user: "Dilpreet",
profile: 'img/dilpreet.jpg',
url: 'img/meme.jpg',
caption: "New meme i found #thor",
comment_user: "Manik",
comment: "my dentist to me :))",
},
{
user: "Manik",
profile: 'img/dilpreet.jpg',
url: 'img/meme2.jpg',
caption: "New meme i found #alien",
comment_user: "Manik",
comment: "my dentist to me :))",
},
{
user: "Dilpreet",
profile: 'img/dilpreet.jpg',
url: 'img/meme3.jpg',
caption: "New meme i found #himanshu",
comment_user: "Manik",
comment: "my dentist to me :))",
}
],
},
}
}