One component to display all product categories?

Question

JavaScript

Good day.
I am learning React, and as a practice I am creating a simple online store with different categories of goods (outerwear, shoes, accessories, etc.), and now the question of the correct rendering of goods on the page has become. For each category of goods, I created a separate component, that is, one component for shoes, the second for accessories, and so on.
I suddenly heard that creating a separate component for each category is "wrong". They didn't explain why it was wrong, but they said that "correct" is to have one single component to display all available product categories, which will update itself depending on the clicked link to a specific category.
The question is, is it really that critical? Have several components, each responsible for the output of a different product, instead of one responsible for the output of everything?

Answer 1

Depends on how different the look / functionality of these components. If they are absolutely identical (ala picture, title, description, category, price) - then it makes no sense to make components for all categories. If they are different enough:
- there are clothes that have a size and color selection widget
- there are apartments (conditionally) that have a map widget
- there are foodstuffs that have a nutrient chart.
It already makes sense to think about some kind of separation; But in any case, a 1:1 correspondence between categories and components is hardly necessary. Large online stores have thousands of categories. Having thousands of components for them can hardly be justified.