Could'nt return maped item inside jsx component

Hey Guys I am trying to display a list of items according to categories,
this is my json structure. I want to display objects according to itemCategory. for e.g if there are two or more pizza they should come under one category heading.

   {
        "itemid": 3,
        "itemName": "Veg OverLoaded",
        "itemPrice": 300.0,
        "itemDescription": "chessy, tasty, covered with fresh veggies",
        "itemCategory": "pizza"
    },

for this i created a map of objects and passed the data according to category as key.

      import React, { forwardRef,useState } from 'react';
      import MenuItem from './MenuItem';
      import './styles.css';
      import Category from '../../Home/Category'

  

      const NewMap = new Map()
    
      const Menu = forwardRef(({ list }, ref) => (
        <>
       <main ref={ref} >

    {Object.values(list).map((k) => {
      if (NewMap.has(k.itemCategory)){
        const itemList = NewMap.get(k.itemCategory);
        const newItemList = [...itemList, k];
        NewMap.set(k.itemCategory, newItemList);
      }else{
        NewMap.set(k.itemCategory , [k]);
      }
    })}

    <MenuItem itemMap = {NewMap}/>
   

   </main>
   </>

      ));

i am passing the map to MenuItem as props and trying to display objects here

import React, { useState, useEffect } from 'react';

import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import {
  cartAddItem,
  cartRemoveItem,
} from '../../../../redux/cart/cart.action';
import {
  selectCartItems,
  selectCartItemsCount,
} from '../../../../redux/cart/cart.selector';

import ButtonAddRemoveItem from '../../ButtonAddRemoveItem';
import './styles.css';
import Accordion from 'react-bootstrap/Accordion'
import useFetchData from './newData'


const MenuItem = ({
  itemMap,
  cartCount,
  cartList,
  cartAddItem,
  cartRemoveItem,
}) => {
  const {
    data,
    loading,
  } = useFetchData();

  const handleQuantity = () => {
    let quantity = 0;
    if (cartCount !== 0) {
      const foundItemInCart = cartList.find((item) => item.itemid === 1);
      if (foundItemInCart) {
        quantity = foundItemInCart.quantity;
      }
    }
    return quantity;
  };

  return (

    <>
      {itemMap.forEach((key, value) => {
        {console.log(value)}
        <div className='container-menu' >
          {console.log(value)}
          <ul>
            {Object.values(key).map((blah) => {
              <li>
                  <h1>{blah.itemName}</h1>
                <div className='item-contents'>
                  {blah.itemName}
                  <p className='item-contents' style={{ float: "right", fontSize: "12" }}> ₹ {blah.itemPrice}</p>
                  <div>
                    <p className='description'>{blah.itemDescription}</p>
                    <ButtonAddRemoveItem
                      quantity={handleQuantity()}
                      handleRemoveItem={() => cartRemoveItem(blah)}
                      handleAddItem={() => cartAddItem(blah)}
                    />

                  </div>


                </div>

              </li>
            })}
          </ul>
        </div>

      })}

      

    </>

  );
};

const mapStateToProps = createStructuredSelector({
  cartCount: selectCartItemsCount,
  cartList: selectCartItems,
});

const mapDispatchToProps = (dispatch) => ({
  cartAddItem: (item) => dispatch(cartAddItem(item)),
  cartRemoveItem: (item) => dispatch(cartRemoveItem(item)),
});

export default connect(mapStateToProps, mapDispatchToProps)(MenuItem);

  export default Menu;

i am able to console.log itemName but i am unable to display it inside jsx component. Any reason why
? what am i missing here

>Solution :

The foreach loop should return JSX. In your case there is no return. I suggest removing the curly brackets.

WRONG:

itemMap.forEach((key, value) => {
  <>
  </>
})

CORRECT:

itemMap.forEach((key, value) => (
  <>
  </>
))

That’s valid for all the loops inside your JSX.