Kevin Powell - Community•3mo 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•3mo 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

PopoOP•3mo ago

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

lko•3mo ago

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

PopoOP•3mo 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•3mo ago

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

PopoOP•3mo ago

I do.

lko•3mo ago

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

PopoOP•3mo ago

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

lko•3mo 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;

PopoOP•3mo ago

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

lko•3mo 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

PopoOP•3mo 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•3mo ago

do a console.log of Lifelist and id

PopoOP•3mo ago