What is the best way to filter data for a component?

Question

React

Hello!
Such a situation:
There are three links to a page of different products, for example: Product1, Product2, Product3. I use react-router and pass the same component there for rendering - . To him in props I pass the incoming data from the database (MongoDB), a list of all products, respectively. When the user navigates to the 'Product1' page, the component should display all the products that belong to that category.
There was an idea for the implementation: add the "type" field to each product in the database and compare it with the href of the page in a separate function that will return new props and pass the already filtered props to the component. But I am tormented by the thought that there are more elegant ways. If yes, what are they?
Thank you!

Answer 1

With mongo, I had something like this:
1) A collection is created in the database, conditionally, "Product Categories", where your "Product1" is located, ... with all the necessary parameters + each has its own id, which the monga generates. By the way, it’s also convenient to store urls here
2) In the collection with products, each product actually has type , only the id of the desired object from the "Product Category" is there
3) When you go to the "Product1" page on the backend , parameters are passed in the request to the database for filtering (same data from url) . It is not necessary to pull such filtrations to the front. What for to you to receive the superfluous data from a DB?
4) The front just displays everything that came from the back
IMHO, this is the most correct solution, but if you wish, you can simplify it in any way, the main idea is that filtering should occur at the database or backend level, but not at the front