Kevin Powell - Community•2mo ago

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

lko•2mo ago

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 them

Popo•2mo ago

I did that with post and since it was not working i was adding s to all of them and trying... ...

lko•2mo ago

can you show the code? and how have you tried with post?

Popo•2mo ago

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;

lko•2mo ago

Do you have some experience with plain js/css and html?

Popo•2mo ago

I do.

lko•2mo ago

what error does it give you if try it with post?

Popo•2mo ago

same error in the pic i shared above. It says the image is undefined.

lko•2mo ago

Try this

"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>
                {post && (
                    <>
                        <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>
                    </>
                )}
                {!post && <p>Post not found</p>}
            </div>
        </>
    );


};

export default LifePost;

"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>
                {post && (
                    <>
                        <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>
                    </>
                )}
                {!post && <p>Post not found</p>}
            </div>
        </>
    );


};

export default LifePost;

Popo•2mo ago

Improved but not working still. It says post not found..

lko•2mo ago

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

Popo•2mo ago

{ 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

lko•2mo ago

do a console.log of Lifelist and id

Popo•2mo ago