Using Map Object to Render React Components in Order - reactjs

Question

I receive an array of product objects like such from my backend.
products = [
{id: 1, price: 10, category: "food", name: "apples"},
{id: 2, price: 5, category: "supplies", name: "spoons"},
{id: 3, price: 15, category: "pets", name: "cat treats"},
{id: 4, price: 9, category: "food", name: "oranges"},
// ...
]
I am looking to render all my products as strips based on their category in a specific order of priority (similar to how Netflix aligns their shows). I don't want them displayed in random order, such as the category strip of food being at the top, the next category strip being pets, etc.
I currently decided to create a map object since it keeps order as followed:
let filteredProducts = new Map([
["food", []],
["pets", []],
["supplies", []],
// ...
])
for (let product of products) {
let category = product["category"]
filteredProducts.get(category).push(product)
}
The goal is to then iterate through the map object and return multiple React Component of category strips from top to bottom.
My question is, I can't help but feel that there are more efficient ways to render this as I don't see map objects being utilized commonly. Are there more efficient and frequently used ways to filter and render by priority or is this in the right direction?

Answer 1

I do believe there is more easier way to do this using Array sort function.
Please consider the snippet below.
const products = [
{id: 1, price: 10, category: "food", name: "apples"},
{id: 2, price: 5, category: "supplies", name: "spoons"},
{id: 3, price: 15, category: "pets", name: "cat treats"},
{id: 4, price: 9, category: "food", name: "oranges"},
// ...
]
const priority = [
'food',
'supplies',
'pets'
]
const orderedProducts = products.sort(
(p1, p2) => priority.indexOf(p1.category) - priority.indexOf(p2.category)
);
Let me know if this looks much cleaner & easier approach.