CODEWITHSUNDEEP
javascriptreactjscontentful
Mazino
Mazino

Reputation: 356

Error while mapping fetched objects with ReactJs

Problem

I want to fetch articles from contentflow but this is the error I am getting

TypeError: Cannot read property 'id' of undefined
(anonymous function)
E:/Project-VidM/client/src/components/Blog/index.js:21
  18 | 
  19 |   const Articles = article.map((entry) => {
  20 |       return(
> 21 |        <div className="entry" key={entry.sys.id}>
     | ^  22 |        <h1>{entry.fields.title}</h1>
  23 |        <img src={entry.fields.featuredImage.sys} />
  24 |        {entry.fields.body.data}
View compiled

This is my React Code

import React, { useState, useEffect} from 'react'
import * as contentful from 'contentful';

const BlogComponent = () => {
    const [article, setArticle] = useState([]);

    const client = contentful.createClient({
    space: 'xxxxxxxx' ,
    accessToken: 'xxxxxxxxxxxxxxxxxxxxxxxx'
    });
    
    useEffect(() => {
       client.getEntries()
            .then((res) => {
                setArticle([res.items]);
            })
    }, [])

   const Articles = article.map((entry) => {
       return(
        <div className="entry" key={entry.sys.id}>
        <h1>{entry.fields.title}</h1>
        <img src={entry.fields.featuredImage} />
        {entry.fields.body.data}
        </div>
       )
    }) 
    return (
       <div>
           {Articles}
       </div>
    )
}

export default BlogComponent

When I do a console.log on res.items, I get the following output:

contentful

How do I map over the particular fields?

Upvotes: 0

Views: 39

Answers (1)

armin yahya
armin yahya

Reputation: 1496

in console.log res.items is an array and you are putting it inside another array

it should be setArticle(res.items) instead of setArticle([res.items])

Upvotes: 1

Related Questions