Render products grouped by dynamic category [duplicate] - json

Question

This question already has answers here:
Render products grouped by category
(2 answers)
Closed 2 years ago.
I have a catalog page with a sidebar which contains a dynamic list:
This sidebar lists products.category and updates whenever there is a new category created/removed.
What I want to achieve
Is to be able to show the filtered table based on category that was clicked. Kind of like using props so I can use products.category to automatically fill the filter without hardcoding each category.
I may be approaching this problem wrong.
const showTable = (props) => {
return (
<>
{products && products.length !== 0 ? (
products
.filter((item) => item.category === props.table) // Kind of like this
.map((product) => ExtendedProduct(product))
) : (
<Loader />
)}
</>
);
};
const TableRoutes = () => {
return (
<>
{products &&
productCategories.map((product) => (
<Tab.Pane key={product.category} eventKey={product.category}>
<ShowTable table={product.category} />
</Tab.Pane>
))}
</>
);
};
The productCategories is where I remove the duplicated categories so they won't be doubled when rendered.
The code above is a functional component.
I'm using https://react-bootstrap.netlify.app/components/tabs/#tabs-custom-layout which explains Tab.Pane.
Things I've looked into:
Render products grouped by category [class-based]

Answer 1

After ~12 hours of fiddling around, apparently the solution is quite the same in the linked question.
Render products grouped by category
const TableRoutes = () => {
return (
<>
<Tab.Pane eventKey="default">
<ExtendedTable
data={
products && products.map((product) => ExtendedProduct(product))
}
/>
</Tab.Pane>
{/* Table filtered by product categories */}
{products &&
productCategories.map((categories) => (
<Tab.Pane key={categories.category} eventKey={categories.category}>
<ExtendedTable
data={
products &&
products
.filter((pane) => pane.category === categories.category)
.map((product) => ExtendedProduct(product))
}
/>
</Tab.Pane>
))}
{/* Table filtered by product types */}
{products &&
productTypes.map((types) => (
<Tab.Pane key={types.type} eventKey={types.type}>
<ExtendedTable
data={
products &&
products
.filter((pane) => pane.type === types.type)
.map((product) => ExtendedProduct(product))
}
/>
</Tab.Pane>
))}
</>
);
};
I guess this can be marked as duplicate...