Hi Ive just started using react and have kinda hit a brick wall on mapping an array.

const fullMen = LocationMenuStore.menuItems['menu']['headings'].map((headings: any) => {
            <Typography>{headings['heading_name']}</Typography>

            return LocationMenuStore.menuItems['menu']['sub_headings'].map((subHeadings: any) => {
                if (subHeadings['menu_heading_id'] === headings['id']) {
                    <Typography>{subHeadings['sub_heading_name']}</Typography>

                    return LocationMenuStore.menuItems['menu']['items'].map((items: any) => {
                        if(items['sub_heading_id'] === subHeadings['id']){
                            <Typography>{items['item_name']}</Typography>
                        }
                    });
                }
            });

        });

I'm fetching data from an API which returns something like below

menu: { 
   headings: [
      {
         "id": 2,
         "business_id": 1,
         "location_id": 1,
         "menu_id": 1,
         "is_active": 0,
         "heading_name": "Drinks"
      },
   ]
   sub_headings: [
      { 
         "business_id": 1,
         "location_id": 1,
         "menu_id": 1,
         "menu_heading_id": 2,
         "is_active": 0,
         "sub_heading_name": "Beers",
      },
      { 
         "business_id": 1,
         "location_id": 1,
         "menu_id": 1,
         "menu_heading_id": 2,
         "is_active": 0,
         "sub_heading_name": "White Wines",
      }
   ]
   items: [
      {
         "id": 1,
         "business_id": 1,
         "location_id": 1,
         "menu_id": 1,
         "heading_id": 2,
         "sub_heading_id": 1,
         "is_active": 0,
         "item_name": "Harp",
      },
      {
         "id": 2,
         "business_id": 1,
         "location_id": 1,
         "menu_id": 1,
         "heading_id": 2,
         "sub_heading_id": 1,
         "is_active": 0,
         "item_name": "Coors",
      },
   ]
}

but to the user, I would like to display it like this

- Heading (Drinks)
-- Sub Heading (Beers)
---- Item (Miller)
---- Item (Coors)

The problem I'm having is that I can't seem to map over them properly, I can map headings ok but the moment I try to nest the map function I can't see anything and if I manage to get some kind of output, there are duplicates.

Is there a way to map everything and filter out duplicates, plus display it correctly?

CodePudding user response：

You did not return heading_name and sub_heading_name

Use .map() v => ()) instead of .map(v => {})

CodePudding user response：

The main issue is that your .map() statements are not returning the JSX that is being generated. Example codesandbox that illustrates this:

https://codesandbox.io/s/musing-dream-lrtk8?file=/src/App.js

In addition, I would also highly recommend you to key these components with a unique ID. You can read more about keying components here.

CodePudding user response：

Here is a quick render function I created using your dataset, you can redo this into a separate function. The main reason for your issue is that you haven't returned the JSX.

Also noted that in the dataset you provided, the sub_heading object does not have an 'id' property, maybe it was a mistake.

menuJSON = { 
   headings: [
      {
         "id": 2,
         "business_id": 1,
         "location_id": 1,
         "menu_id": 1,
         "is_active": 0,
         "heading_name": "Drinks"
      },
   ]
   sub_headings: [
      { 
         "id": 1,
         "business_id": 1,
         "location_id": 1,
         "menu_id": 1,
         "menu_heading_id": 2,
         "is_active": 0,
         "sub_heading_name": "Beers",
      },
      { 
         "business_id": 1,
         "location_id": 1,
         "menu_id": 1,
         "menu_heading_id": 2,
         "is_active": 0,
         "sub_heading_name": "White Wines",
      }
   ]
   items: [
      {
         "id": 1,
         "business_id": 1,
         "location_id": 1,
         "menu_id": 1,
         "heading_id": 2,
         "sub_heading_id": 1,
         "is_active": 0,
         "item_name": "Harp",
      },
      {
         "id": 2,
         "business_id": 1,
         "location_id": 1,
         "menu_id": 1,
         "heading_id": 2,
         "sub_heading_id": 1,
         "is_active": 0,
         "item_name": "Coors",
      },
   ]
}
render() {
        return (
          <div>
            {this.menuJSON['headings'].map((heading) => {
              return(<div>{heading['heading_name']}
              {this.menuJSON['sub_headings'].map((subHeading) => {
                  if(subHeading['menu_heading_id'] === heading['id']){
                    return(<div>{subHeading['sub_heading_name']}
                      {this.menuJSON['items'].map((item) => {
                          if(item['sub_heading_id'] === subHeading['id']){
                            return(<div>{item['item_name']}</div>)
                          }else{
                            return(<div></div>)
                          }
                      })}
                    </div>)
                  }else{
                    return(<div></div>)
                  }
              })}
              </div>)
            })
            }
          </div>
        )
      }