Show items based on category using filter

Question

I am learning reactjs by developing an app. I was doing quite well with no problem. However i encountered a problem now when trying to list the menus/meals based on categories like veg and non-veg. I am using filter function of lodash and in console i see my filter function working but if there is a veg meal , it gives me true else false. But i dont want the output in true and false rather i want all the meals that falls under veg and non-veg as this way:

Veg

mushroom-drumstick

Non-veg

Chicken Momo Chicken BBQ

Here is my code

const Menu = ({restaurant}) => {
  const veg = _.filter(restaurant.meal, (meal) => {
    return meal.meal_category.name==='veg';
  });
  const nonVeg = _.map(restaurant.meal, (meal) => {
    return meal.meal_category.name==='Non-veg';
  });
  return(
    <div>
      <ul className="list-group veg">
        Veg
        <li className="list-item-group">
          {veg}
        </li>
      </ul>
      <ul className="list-group">
        Non-veg
        <li className="list-item-group">
          {nonVeg}
        </li>
      </ul>
    </div>
  );
}

export default Menu;

restaurant object looks like

[
    {
        "id": 1,
        "owner": "Sanskar",
        "meal": [
            {
                "id": 1,
                "meal_category": {
                    "id": 1,
                    "name": "veg",
                    "slug": "veg"
                },
                "name": "Mushroom drumstick",
                "slug": "mushroom-drumstick",
                "price": 30,
                "quantity": 20,
                "image": null,
                "rating": 4.5,
                "available": true,
                "restaurant": 1
            },
            {
                "id": 2,
                "meal_category": {
                    "id": 2,
                    "name": "Non-veg",
                    "slug": "non-veg"
                },
                "name": "Ham Cheesy Burger",
                "slug": "ham-cheesy-burger",
                "price": 180,
                "quantity": 10,
                "image": null,
                "rating": 5.0,
                "available": true,
                "restaurant": 1
            },
            {
                "id": 3,
                "meal_category": {
                    "id": 2,
                    "name": "Non-veg",
                    "slug": "non-veg"
                },
                "name": "Chicken momo",
                "slug": "chicken-momo",
                "price": 100,
                "quantity": 10,
                "image": null,
                "rating": 4.3,
                "available": true,
                "restaurant": 1
            }
        ],
        "name": "Kathmandu Fast Food Center",
        "slug": "kathmandu-fast-food-center",
        "status": 1,
    },
    {
        "id": 3,
        "owner": "Sanskar",
        "meal": [
            {
                "id": 1,
                "meal_category": {
                    "id": 1,
                    "name": "veg",
                    "slug": "veg"
                },
                "name": "Potato drumstick",
                "slug": "potato-drumstick",
                "price": 30,
                "quantity": 20,
                "image": null,
                "rating": 4.5,
                "available": true,
                "restaurant": 1
            },
            {
                "id": 2,
                "meal_category": {
                    "id": 2,
                    "name": "Non-veg",
                    "slug": "non-veg"
                },
                "name": "Ham Burger",
                "slug": "ham-burger",
                "price": 180,
                "quantity": 10,
                "image": null,
                "rating": 5.0,
                "available": true,
                "restaurant": 1
            },
            {
                "id": 3,
                "meal_category": {
                    "id": 2,
                    "name": "Non-veg",
                    "slug": "non-veg"
                },
                "name": "Buff momo",
                "slug": "buff-momo",
                "price": 100,
                "quantity": 10,
                "image": null,
                "rating": 4.3,
                "available": true,
                "restaurant": 1
            }
        ],
        "name": "ABC Restaurant",
        "slug": "abc-restaurant",
        "status": 1,
    },
    {
        "id": 4,
        "owner": "admin",
        "meal": [],
        "name": "DEF Restaurant",
        "slug": "def-restaurant",
        "status": 1,
    },
    {
        "id": 5,
        "owner": "Sanskar",
        "meal": [],
        "name": "sanskar restaurant",
        "slug": "sanskar-restaurant",
        "status": 1,
    }
]

Answer 1

Use _.filter() to make the constants veg and nonVeg and then to return the html view make a _.map() to iterate and get the proper li elements:

const Menu = ({restaurant}) => {
    const veg = _.filter(restaurant.meal, (meal) => {
        return meal.meal_category.name==='veg';
    });
    const nonVeg = _.filter(restaurant.meal, (meal) => {
        return meal.meal_category.name==='Non-veg';
    });
    return(
        <div>
            <ul className="list-group veg">
                Veg
                {
                    _.map(veg, (meal) => {
                        return <li className="list-item-group">{meal.name}</li>
                    })
                }
            </ul>
            <ul className="list-group">
                Non-veg
                {
                    _.map(nonVeg, (meal) => {
                        return <li className="list-item-group">{meal.name}</li>
                    })
                }
            </ul>
        </div>
    );
}

export default Menu;