Learner Learner - 2 months ago 6
React JSX Question

Show items based on category using filter

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

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;
Comments