Contentful contents are displaying as json object, but unable to get values

Question

I have created two records in contentful and trying to fetch the contenful contents in my React-hooks web site. However I am unable to get the title, description, image, shortDescription values under fields: level inside the JSON object. How can I iterate and get values from that ? Could someone please advise me to resolve the issue.

https://codesandbox.io/s/dark-glitter-9k30w

[
   {
      "sys":{
         "space":{
            "sys":{
               "type":"Link",
               "linkType":"Space",
               "id":"piw45a7gxkal"
            }
         },
         "id":"2L5jhZhtvUwuWe20kYM2vh",
         "type":"Entry",
         "createdAt":"2020-09-20T11:50:53.764Z",
         "updatedAt":"2020-09-20T11:50:53.764Z",
         "environment":{
            "sys":{
               "id":"master",
               "type":"Link",
               "linkType":"Environment"
            }
         },
         "revision":1,
         "contentType":{
            "sys":{
               "type":"Link",
               "linkType":"ContentType",
               "id":"course"
            }
         },
         "locale":"en-US"
      },
      "fields":{
         "title":"API testing using Postman",
         "slug":"api-testing-using-postman",
         "image":{
            "sys":{
               "type":"Link",
               "linkType":"Asset",
               "id":"6n41KgxfwWmmeCiSemIsK2"
            }
         },
         "shortDescription":"Cypress test to read a JSON file from Fixture folder.",
         "description":"Api testing using postman. This is useful for testers.\n\npm.test()\n\nApi testing using postman. This is useful for testers. \n",
         "duration":3,
         "skillLevel":"beginner",
         "lessons":[
            {
               "sys":{
                  "type":"Link",
                  "linkType":"Entry",
                  "id":"3op5VIqGZiwoe06c8IQIMO"
               }
            }
         ],
         "categories":[
            {
               "sys":{
                  "type":"Link",
                  "linkType":"Entry",
                  "id":"7JhDodrNmwmwGmQqiACW4"
               }
            }
         ]
      }
   },
   {
      "sys":{
         "space":{
            "sys":{
               "type":"Link",
               "linkType":"Space",
               "id":"piw45a7gxkal"
            }
         },
         "id":"1ePcCVp2VzehrXpcSaq6aM",
         "type":"Entry",
         "createdAt":"2020-09-20T08:43:44.388Z",
         "updatedAt":"2020-09-20T08:43:44.388Z",
         "environment":{
            "sys":{
               "id":"master",
               "type":"Link",
               "linkType":"Environment"
            }
         },
         "revision":1,
         "contentType":{
            "sys":{
               "type":"Link",
               "linkType":"ContentType",
               "id":"course"
            }
         },
         "locale":"en-US"
      },
      "fields":{
         "title":"Cypress test to read a JSON file",
         "slug":"cypress-test-to-read-a-json-file",
         "image":{
            "sys":{
               "type":"Link",
               "linkType":"Asset",
               "id":"6n41KgxfwWmmeCiSemIsK2"
            }
         },
         "shortDescription":"Cypress test to read a JSON file from Fixture folder.",
         "description":"\nThis cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. \n\n> cy.get()\n\nThis cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. \n",
         "duration":3,
         "skillLevel":"beginner",
         "lessons":[
            {
               "sys":{
                  "type":"Link",
                  "linkType":"Entry",
                  "id":"3op5VIqGZiwoe06c8IQIMO"
               }
            }
         ],
         "categories":[
            {
               "sys":{
                  "type":"Link",
                  "linkType":"Entry",
                  "id":"7JhDodrNmwmwGmQqiACW4"
               }
            }
         ]
      }
   }
]

Home.js

const Home = () => {

const [blogArticles, setBlogArticles] = useState([]);

  useEffect(()=>{
        async function fetchData() {
            const entry = await client.getEntries();
            console.log(entry.items);
            setBlogArticles(entry.items);
             }
          fetchData();
    },[]);

return(

    <div className="container">
                        {
                            blogArticles.map(({ id, title, images, shortDescription, description}) => (
                                <div key={id} className="column-center">
                                   <article className="blogmaintile">
                                    <img className="blogImage" key={images} src={images} alt="myimage"</img> 
                                        <div className="blogtitle">
                                            <span key={title}>{title}</span>
                                        </div>
                                        <section>
                                    <p className="blogdescription" key={description}>{description}</p>
                                        </section>
                                        <section>
                                       <p className="blogdescription" key={shortDescription}>{shortDescription}</p>
                                        </section>

                                     
                                        <section className="col2">
                                            <a href="">Read more {'>'}{'>'}</a>
                                        </section>
                                    </article>
                                </div>
                            ))
                        }
                    </div>

  )
}
export default Home;

Answer 1

You are not destructing it properly there is still another object level that you should go inside which is fields, the same thing for id since it's inside the `sys' object you have to go inside it first.

//using Destructuring 

blogArticles.map(({ sys: { id }, fields: { title, image, shortDescription, description } }) => {
    console.log(id, title, image, shortDescription, description)
    //to get the image id do: image.sys.id
})

or:

blogArticles.map(article => {

    const id = article.id
    const title = article.fields.title
    const image_id = article.fields.image.id
    const shortDescription = article.fields.shortDescription
    const descreption = article.fields.description
    console.log(id, title, image_id, shortDescription, descreption)
    
})

Here is the result you just need to add the base url to the image so they show up