Not able to display tags from an array onto a label tag-CodePudding

I am retrieving data through API with axios and i am facing an issue rendering one array containing tags into a label element :

Here is the JSON

{id: 1, header: "Header 1", title: "Title 1", description: "Description 1",…}
card_image: "http://localhost:8000/media/media/images/cards/card1_cMPijRQ.jpg"
description: "Description 1"
header: "Header 1"
id: 1
logo_image: "http://localhost:8000/media/media/images/logos/1_g2pBgUP.png"
main_img: "http://localhost:8000/media/media/images/main/1_sS1Yf60.jpg"
tags: ["Finance", "E-commerce"]
title: "Title 1"

I am not able to display tags, in fact it des display once and then when I refresh this error is displayed :

TypeError: Cannot read properties of undefined (reading 'map')
ProductInfo
C:/personalworkspace/BP/front/src/components/ProductInfo.js:39
  36 |   </div>
  37 | </Grid>
  38 | <Grid item>
> 39 |   <div className="product tags flex container child">
     | ^  40 |     {props.tags.map((tagsList, i) => (
  41 |       <Label size="tiny" as="a" image key={i}>
  42 |         {tagsList}

Please note, label is a semantic ui tag. Thanks for your help.

CodePudding user response：

When you call the remote API, while the request is working, tags is not fulfilled thus undefined. You can use something like this:

{(props.tags || []).map((tagsList, i)

Or you can use a loader to show up a spinner while the request is pending.