Filtering list of products in React-CodePudding

pls help me to arrange filtering an array with currencies in React application. i'm rendering the list of products. And it should contain price block. i have an array of prices in different currencies. (Actually it is an array of products, which contains subArray of prices in different currencies for each product). Like this:

"data": {
    "category": {
      "products": [
        {
          "id": "1",
          "name": "Nike Air Huarache Le",
          "gallery": [
            "https://cdn.shopify.com/s/files/1/0087/6193/3920/products/DD1381200_DEOA_2_720x.jpg?v=1612816087",
            "https://cdn.shopify.com/s/files/1/0087/6193/3920/products/DD1381200_DEOA_1_720x.jpg?v=1612816087"
          ],
          "prices": [
            {
              "currency": {
                "label": "USD",
                "symbol": "$"
              },
              "amount": 144.69
            },
            {
              "currency": {
                "label": "GBP",
                "symbol": "£"
              },
              "amount": 104
            },
            {
              "currency": {
                "label": "RUB",
                "symbol": "₽"
              },
              "amount": 10941.76
            }
          ]
        },

there is a state which contains currency, which customer choose. the problem is that i can not arrange filter to display in card list the price in chosen currency.

return (
        data.category.products.map(({id, name, gallery, prices, currency, label, amount}) => 
        <div key={id} >
            <img src={gallery[0]} alt={id} />     // it works
            <p>{name}</p>                         // it also works

//then i'd like to filter array of prices and find an object where price.currency.label === 'USD' (for example, presume that state is USD). Then i need to show to customer price in format: $ 144.69

so i make filter like this:

<p>{prices.filter((item) => {
                    {/* console.log(item.currency.label) */}
                    return item.currency.label.includes('USD').label })} </p>

id does not work. i think OK, filter returned me an array with only position which i have to display, let's make a map

<p>{prices.filter((item) => {
       return item.currency.label.includes('USD').label}).map((el)=>el)} 
    </p>

it does not work again...

I tried many different ways, but all of them does not show neither price nor even currency. Pls help me to understand what i've missed.

CodePudding user response：

You are not filtering correctly, what you need to do is the following:

// This will return a filtered prices array, which only includes the USD currency object as the element of index 0
prices.filter((item) => {
      return item.currency.label.includes('USD')
})

// and in order to access the label you can do the following
prices.filter((item) => {
      return item.currency.label.includes('USD')
})[0].currency.lable