Unable to render the Post page in NextJS
The array of an object is listed as follows just to give you an idea..
{ id : 1,
image: "/image"
title: dfdhfdjfh
description: dfhdkfhd
}
I built the same in ReactJs and it works fine but not able to in NextJS. I have been at this for whole day. Can someone guide me?
23 Replies
You're saying
posts with the s, so i guess it's an array
You should map trough your post and then render each one of themI did that with post and since it was not working i was adding s to all of them and trying... ...
can you show the code?
and how have you tried with
post?I just removed the "s" let me paste it here.
"use client"
import React from 'react';
import { useParams } from "next/navigation";
import Lifelist from "./lifelist";
import styles from "./page.module.css"
import Image from 'next/image';
const LifePost = () => {
const { id } = useParams();
const post = Lifelist.find((post) => post.id === parseInt(id));
return (
<>
<div> <h1>what is this</h1> <img className={styles.picture} src={post.image} alt={post.title} /> <h1 className={styles.posttitle}>{post.title}</h1> <div className={styles.blogpost}>
<p className={styles.bodyText}>{post.description}</p> {/* Assuming 'content' is the detailed post */} </div> </div> </> ); }; export default LifePost;
<div> <h1>what is this</h1> <img className={styles.picture} src={post.image} alt={post.title} /> <h1 className={styles.posttitle}>{post.title}</h1> <div className={styles.blogpost}>
<p className={styles.bodyText}>{post.description}</p> {/* Assuming 'content' is the detailed post */} </div> </div> </> ); }; export default LifePost;
Do you have some experience with plain js/css and html?
I do.
what error does it give you if try it with
post?same error in the pic i shared above.
It says the image is undefined.
Try this
Improved but not working still. It says post not found..
Ok, it means that the post was not found in the array, it means you're trying to find a post with the id
parseInt(id) but there's none in the array
So the problem is there{
id: 2,
image: "/happyee.webp",
title: "What the is dfdfd dfdf dfdf dfd going here",
description:
"lorem ipsd dfjdk s ffjdkfj s.lf lsjf slf sf s fjslfosjf sf s sfjs ffslfj sfls fs",
},
This is an example of the array.
Why would not if find it
do a console.log of
Lifelist and id
it is there.
which one is supposed to be the Id?
I am sorry it is for the lifelist only
It says undefined in the 11 line that is where i console.log id
That's why
How do i fix this. where am i doing wrong?
Functions: useParams | Next.js
API Reference for the useParams hook.
Thanks a lot!!!
Have a great day!!