Блог

В React у меня есть объект, подобный:

 shirt : {
title : "Abc",
material : "cotton",
options : [
    0 : {
    price: 10,
    color: red
    },
    1 : {
    price: 20,
    color: green
    },
    2 : {
    price: 30,
    color: blue
    },
}
  

На странице каталога я хочу отобразить только самый дешевый вариант («От 10 долларов») для каждой рубашки.

Для отображения всех рубашек я использую функцию map:

 shirts.map((shirt) => (<div>{shirt.title}</div><div>{shirt.material}</div>))
  

Как я могу показать только самую дешевую цену?

Я не могу использовать {shirt.options.price[0]} , потому что первый элемент массива не всегда имеет самую дешевую цену.

Вы могли бы сделать:

 const minPrice = Math.min(...shirt.options.map(({price}) => price))
const cheapeastShirt = shirt.options.find({price} => minPrice === price)