NEXTJS: Data from getServerSideProps not showing-CodePudding

I'm trying to fetch data from getServerSideProps and I do get the data in console but when I try to show said data it won't show

Where im fetching and passing it to another component

------------------------------------------------------------------------------------
Where im fetching data

export async function getServerSideProps() {
  const postData = await fetch("http://localhost:8000/api/root/").then(
    (res) => res.json() // Fecthing data and turning response to json
  );

  return {
    props: {
      postData, // Returing feteched data as prop
    },
  };
}
-------------------------------------------------------------------------------------
Passing as a prop

{user ? (
 <Reddit auth={auth} user={user} posts={postData} />
) : (
 <Login auth={auth} />
)}

Here's my Reddit.js

import Header from "../components/header/Header";

function Reddit({ auth, user, posts }) {
  return (
    <div>
      <Header auth={auth} user={user} />
      {posts.map((i) => {
        <h1>{i.title}</h1>;
      })}
    </div>
  );
}

export default Reddit;

CodePudding user response：

check this code

export function getServerSideProps() {
  const postData = fetch("http://localhost:8000/api/root/").then(
    (res) => res.json()
  );

  return {
    props: {
      postData, 
    },
  };
}

CodePudding user response：

Try remove the extra braces from the postData in the return props. I imagine it is one level too deep.

  return {
    props: postData
  };

Explanation:

// Your postData object probably looks like:
const postData = { auth: ..., user: ..., posts: ... }

// If you deserialize with extra braces it will fail
const { auth, user } = { postData } // Fails
const { auth, user } = postData // Succeeds