Not the best title, but I have another project where its like a menu for a site. Right now, I have just two components. One is the menu which will render the other component and the other component is menu items. The menu items will use an api to get the items table and then map out the items in the component. However, is there a way to split up the results of a map? Lets say that I only want the drinks in the menu item to be displayed under a heading of “drinks” or burgers listed out a heading of “burgers”. I tried searching, but not sure if there is a way to do that
EDIT: Here is an edit to the original question, I found a way to filter the results based on a property of the row. This is just dummy data that I am using to test right now but here is the code
import React, { useState } from 'react';
function Items() {
const [items, setItems] = useState([]);
const array = [
{ coffee: "Americano", size: "Medium", price: 50, description: "medium coffee" },
{ coffee: "Espressoododod", size: "large", price: 20, description: "large coffee" },
{ coffee: "Espresso", size: "large", price: 20, description: "large coffee" },
{ coffee: "Espressoooo", size: "large", price: 20, description: "large coffee" },
{ coffee: "Espresso", size: "small", price: 20, description: "large coffee" }
];
return (
<div>
<h1>Drinks</h1>
{array
.filter(array => {
return (
array.size === 'large'
);
})
.map((arr) => (
<div className="foodItem"> <p> Name: {arr.coffee}</p> <p>Size {arr.size}</p> <p> Price {arr.price}</p> <p>{arr.description}</p></div>
))}
</div>
);
}
export default Items;
So with the code it will only map those who size =“large”. Not sure if this is “best practice” or necessarily a bad thing, but what if I added another map so that it looks like this now
import React, { useState } from 'react';
function Items() {
const [items, setItems] = useState([]);
const array = [
{ coffee: "Americano", size: "small", price: 50, description: "medium coffee", category: "drinks" },
{ coffee: "Espressoododod", size: "large", price: 20, description: "large coffee", category: "starters" },
{ coffee: "Espresso", size: "large", price: 20, description: "large coffee", category: "drinks" },
{ coffee: "Espressoooo", size: "large", price: 20, description: "large coffee", category: "starters"},
{ coffee: "Espresso", size: "small", price: 20, description: "large coffee", category: "drinks" }
];
return (
<div>
{array
.filter(array => {
return (
array.size === 'large'
);
})
.map((arr) => (
<>
<h1></h1><div className="foodItem"> <p> Name: {arr.coffee}</p> <p>Size {arr.size}</p> <p> Price {arr.price}</p> <p>{arr.description}</p></div>
</>
))}
{array
.filter(array => {
return (
array.size === 'small'
);
})
.map((arr) => (
<>
<h1></h1><div className="foodItem"> <p> Name: {arr.coffee}</p> <p>Size {arr.size}</p> <p> Price {arr.price}</p> <p>{arr.description}</p></div>
</>
))}
</div>
);
}
export default Items;
It does what I want, but not sure if this is a good thing to use or not. Not sure if there is a rule against multiple maps