ReactJS = array mapping not showing

Question

I want to ask about array mapping.

So, I have data in the api that looks like this when in the console.

// The code for the fetch is like this

const [listCategory, setListCategory] = useState([]);

    const getListCategoryPoi = () => {
        setIsLoading(true);
        getCategoryPoi()
          .then((res) => {
            setListCategory(res[1].map((item) => item.data.features));
            console.log(res[1].map((item) => item.data.features));
            console.log(res[1].map((item) => item.data.features[0]));
          })
          .catch((reject) => {
            console.log(reject);
          })
          .finally(setIsLoading(false));
      };

// And the code to display the data like this when using .map

  {listCategory.map((item, index) => (
    <p key={index}>{item.category}</p>
  ))}

However, when I look in the browser it doesn't show up.

My question is, how to display the data category if the data in the console looks like the first image? Thank you

Vinayak Vohra · Accepted Answer · 2023-02-01 10:39:53Z

1

Answering the problem in comment:

{listCategory[0]?.map(item, index) => ( 
    <p key={index}>{item.category}</p>
)}

The issue is that before fetching data from API, listCategory is empty so listCategory[0] is undefined and undefined does not have a map function

?. is optional chaining. Read here: Optional Chaining

answered Feb 1, 2023 at 10:39

Vinayak Vohra

3743 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kia Kalista Over a year ago

bless you, its work dude and not blank white again.

Aminarune · Accepted Answer · 2023-02-01 10:02:23Z

1

According to the console log, your output is like this

[
  [
    { category: 'Airport', jumlah_poi: 308 },
    { category: 'Amusement Park', jumlah_poi: 3873 },
    //... and the rest of data
  ],
];

I assume that is the value of listCategory so your code to display data will be like this

{listCategory[0].map((item, index) => (
    <p key={index}>{item.category}</p>
  ))}

answered Feb 1, 2023 at 10:02

Aminarune

6321 gold badge4 silver badges18 bronze badges

1 Comment

Kia Kalista Over a year ago

oh w8, "Uncaught TypeError: Cannot read properties of undefined (reading 'map')" and blank white

Krish · Accepted Answer · 2023-02-01 10:27:22Z

0

I think You should return the paragraph tag

{listCategory[0].map(item, index) => ( 
  return( 
    <p key={index}>{item.category}</p>
  ))}

answered Feb 1, 2023 at 10:27

Krish

1492 silver badges6 bronze badges

2 Comments

Kia Kalista Over a year ago

Blank white, and "Uncaught TypeError: Cannot read properties of undefined (reading 'map')"on the line listCategory[0].map

Krish Over a year ago

what does it shows you when you do console.log(listCategoty); ?

Collectives™ on Stack Overflow

ReactJS = array mapping not showing

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related