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

CodePudding user response：

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.

CodePudding user response：

To return an array of elements, you should use map instead of forEach like below code, because forEach loop returns undefined, while map always returns an array.

{itemMap.map((key, value) => {
   return (<div className='container-menu'>
    ...
   </div>)
 }
}

or

{itemMap.map((key, value) => (<div className='container-menu'>
    ...
  </div>)
}