CODEWITHSUNDEEP
javascriptreactjs
Ardhi Cho
Ardhi Cho

Reputation: 41

Why can't the object be read?

I have the react code as below with objects that cannot be displayed in the return.

import React, { useState, useEffect } from 'react';


const dataGuru = [
    {
        id : 1,
        name : 'Andreas Ivan Jensen',
        instrument : "Drum",
        address : 'Yogyakarta',
        experience : [
            {
                name : 'Asian Beat 2011',
                year : 2011,
            }
        ],
        photo : 'https://townsquare.media/site/366/files/2019/08/GettyImages-876067730.jpg?w=980&q=75',
        description : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    },
    {
        id : 2,
        name : 'Deny AJD',
        instrument : "Drum",
        address : 'Jakarta',
        experience : [
            {
                name : 'Guru dari UI',
                year : 2011,
            }
        ],
        photo : 'https://townsquare.media/site/366/files/2019/08/GettyImages-876067730.jpg?w=980&q=75',
        description : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'

    },
]

const DetailPost = (props) =>{

    const [post, setPost] = useState({});

    const fetchPostByID = () =>{

        const matchData = dataGuru.filter(post => post.id == props.match.params.id);
        setPost(matchData)

    }

    useEffect(()=>{

       fetchPostByID();

    },[])

    console.log(post)

    return(
        <div>
            { post.name }
        </div>
    )
}

export default DetailPost;

I'm a beginner in react js. I want to ask. what I'm concerned about is, why isn't the {post.name} in the return unreadable ?

and the data in the post is this

  {
        id : 1,
        name : 'Andreas Ivan Jensen',
        instrument : "Drum",
        address : 'Yogyakarta',
        experience : [
            {
                name : 'Asian Beat 2011',
                year : 2011,
            }
        ],
        photo : 'https://townsquare.media/site/366/files/2019/08/GettyImages-876067730.jpg?w=980&q=75',
        description : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    }

I also use the map post.map () but there is an error post not an object.

Please help. I will really appreciate you.

thanks

Upvotes: 2

Views: 73

Answers (3)

DcoderZ
DcoderZ

Reputation: 120

I've create an example that explains how you can access your values:

https://codesandbox.io/s/adoring-allen-g2gm7

as mentioned in the comments you will need to have post.experience[0].name or year and filter does return an array.

return(
      <div>
        <p>name: {post === null ? 'retrieving...': post[0].name }</p>
        <p>instrument: { post === null ? 'retrieving...':post[0].instrument }</p>
        <p>address: { post === null ? 'retrieving...':post[0].address }</p>
        <p>experience name: { post === null ? 'retrieving...':post[0].experience[0].name}</p>
        <p>experience year: { post === null ? 'retrieving...':post[0].experience[0].year}</p>
        <p>photo url: { post === null ? 'retrieving...':post[0].photo }</p>
        <p>description: { post === null ? 'retrieving...':post[0].description }</p>

      </div>
    )

I added the useState(null) value as you can see it will show retrieving until the values are loaded so you won't get an error for rendering post before it is set.

I hope this helps.

Upvotes: 0

andy mccullough
andy mccullough

Reputation: 9541

filter() returns an array, you will need to either use the index of 0, i.e.

dataGuru.filter(post => post.id == props.match.params.id)[0]

or find(), e.g.

dataGuru.find(post => post.id == props.match.params.id)

in order to get the single post, and then you'll be able to get it's name property correctly

Upvotes: 0

Zachary Haber
Zachary Haber

Reputation: 11017

The issue lies in the fetchPostByID code. You were using Array#filter which returns an array of all matching items (returns true in the callback). Array#find will only grab the first item in the array which matches. I believe that is what you want as the post you are using is an object to start rather than an array.

const fetchPostByID = () =>{

    const matchData = dataGuru.find(post => post.id == props.match.params.id);
    setPost(matchData)

}

Upvotes: 2

Related Questions