Есть компонент, отвечающий за рендер товаров в интернет-магазине. Хочу, чтобы компонент был один, и в зависимости от условия выводил нужную информацию. В данном случае пользователь нажал на ссылку категории один - компонент вывел нужную информацию, нажал на категорию два - отобразилась она, и т.д.
Мое решение выглядит как-то так:
function ProductsPage({collections}) {
return (
<Route path="/products/type_one" render={() =>
<div>
<h1>Type One</h1>
<div className="products">
{
collections.category.typeOne.items.map((item) => {
return (
<ProductCard key={item.id} item={item} />
)
})
}
</div>
</div>
}/>
<Route path="/products/type_two" render={() =>
<div>
<h1>Type Two</h1>
<div className="products">
{
collections.category.typeTwo.items.map((item) => {
return (
<ProductCard key={item.id} item={item} />
)
})
}
</div>
</div>
}/>
)
}
Пока у меня только четыре подкатегории - это выглядит довольно безобидно. Но если их будут десятки, то код компонента будет забит подобной бесконечной копипастой. Есть ли более элегантный метод решения задачи?
