Data display problem

JavaScript
1

Good morning,

I follow an online tutorial and I don’t understand why it doesn’t show me the data
Do you have an idea?

Posts.jsx

import React, { useState } from 'react'

import Thumbnail1 from '../images/blog1.jpg'
import Thumbnail2 from '../images/blog2.jpg'
import Thumbnail3 from '../images/blog3.jpg'
import Thumbnail4 from '../images/blog4.jpg'
import PostItem from './PostItem'

const DUMMY_POSTS = [
    {
        id: '1',
        thumbnail: Thumbnail1,
        category: 'education',
        title: 'This is title of the first post this blog.',
        desc: 'Lorem ipsim dolor sit amet consecateur adisplinoing elit.',
        authorID: 3
    },
    {
        id: '2',
        thumbnail: Thumbnail2,
        category: 'education',
        title: 'This is title of the first post this blog.',
        desc: 'Lorem ipsim dolor sit amet consecateur adisplinoing elit.',
        authorID: 1
    },
    {
        id: '3',
        thumbnail: Thumbnail3,
        category: 'education',
        title: 'This is title of the first post this blog.',
        desc: 'Lorem ipsim dolor sit amet consecateur adisplinoing elit.',
        authorID: 5
    },
    {

        id: '4',
        thumbnail: Thumbnail4,
        category: 'education',
        title: 'This is title of the first post this blog.',
        desc: 'Lorem ipsim dolor sit amet consecateur adisplinoing elit.',
        authorID: 10
    },
    {

        id: '5',
        thumbnail: Thumbnail2,
        category: 'education',
        title: 'This is title of the first post this blog.',
        desc: 'Lorem ipsim dolor sit amet consecateur adisplinoing elit.',
        authorID: 11
    },
]

const Posts = () => {
    const [posts, setPosts] = useState(DUMMY_POSTS)
    return (
        <section className="posts">
            {
                posts.map(({ id, thumbnail, category, title, description, authorID }) =>
                    <PostItem key={id} postID={id} thumbnail={thumbnail} category={category} title={title}
                        description={description} authorID={authorID} />)
            }
        </section>
    )
}

export default Posts

PostItem.jsx

import React from 'react'

const PostItem = () => {
    return (
        <div>PostItem</div>
    )
}

export default PostItem
2

Hi,

In your Posts component, you’re passing a description prop, but in the DUMMY_POSTS data, it’s actually labeled as desc.

Additionally, your PostItem component is only rendering the text “PostItem” instead of displaying the actual data from the props.

To fix this, update PostItem.jsx like so:

const PostItem = ({ thumbnail, category, title, desc, authorID }) => {
  return (
    <div>
      <img src={thumbnail} alt={title} />
      <h2>{title}</h2>
      <p>{category}</p>
      <p>{desc}</p>
      <p>Author ID: {authorID}</p>
    </div>
  )
}

export default PostItem

LMK if that works.

2 Likes
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.