How to find the unique value from array as well as pass it to component-CodePudding

I am trying to send product.category to AAsOfLowNav but some of the categories are occurring more than one time I did a lot but it is not working can you help me figure out what is going on

```<div id="container3" className="container3">
          {products &&
            products
              .map(((product)=> 
                <AAsOfLowNav key={product._id} product={(product.category)} />
                ))
              .reverse()
              }
   </div>```

how can I give unique items to other component I tried the filter() one but didn't work for me

0: {sales: 0, _id: '628545d0471e6feeca7b82ce', name: 'Headphones', description: '  Lorem ipsum dolor sit amet consectetur adipisici…ficiis, aperiam consequuntur ipsam non iure iste.', price: 2000, …}
1: {sales: 0, limited: 'none', _id: '62854647471e6feeca7b82d4', name: 'Lamp', description: '  Lorem ipsum dolor sit amet consectetur adipisici…ficiis, aperiam consequuntur ipsam non iure iste.', …}
2: {sales: 0, limited: 'none', _id: '628e016357e337ba8e3821b7', name: 'Jacket', description: '  Lorem ipsum dolor sit amet consectetur adipisici…ficiis, aperiam consequuntur ipsam non iure iste.', …}
3: {_id: '629f242105e3927a8ddf4a3d', name: 'Lighter', description: 'It is one the best and portable Lighter', price: 500, ratings: 0, …}
4: {_id: '62a62bf37c4dd911a403c4c8', name: 'Cosmetics', description: 'When it comes to skincare, choosing from a plethor…ial Media. Types: Politics, World News, Business.', price: 5000, ratings: 0, …}
5: {_id: '62a62d837c4dd911a403c4d5', name: 'Versace', description: 'Gianni Versace S.r.l., usually referred to simply …to-wear and accessories, as well as haute couture', price: 23000, ratings: 0, …}
6: {_id: '62a62ee87c4dd911a403c4e2', name: 'Speakers', description: 'Find JBL Speakers Prices in Pakistan. JBL Speakers…uy or Purchase JBL Speakers from our Online Shop.', price: 5999, ratings: 0, …}
7: {_id: '62a62f9a7c4dd911a403c4ea', name: 'Neck Masager', description: '8 Powerful Deep-Shiatsu Kneading Massage Nodes. Ou…fatigue, and relax yourself after a long day work', price: 9999, ratings: 0, …}
8: {_id: '62a630047c4dd911a403c4f0', name: 'Smart Watches', description: '8 Powerful Deep-Shiatsu Kneading Massage Nodes. Ou…fatigue, and relax yourself after a long day work', price: 4700, ratings: 0, …}
9: {_id: '62a631be7c4dd911a403c4f8', name: 'Tripod', description: '8 Powerful Deep-Shiatsu Kneading Massage Nodes. Ou…fatigue, and relax yourself after a long day work', price: 900, ratings: 0, …}
10: {_id: '62a633d3446519dfa0382127', name: 'Long Coat', description: 'Winter coats with a durable water resistant (DWR) …a water-repellent finish is more than sufficient.', price: 8000, ratings: 0, …}
11: {_id: '62a85344b2f86e3c3437a356', name: 'Nikey Air Max', description: 'Winter coats with a durable water resistant (DWR) …a water-repellent finish is more than sufficient.', price: 8000, ratings: 0, …}
12: {_id: '62a859db978a8929754260a3', name: 'Nikey Air Max', description: 'Winter coats with a durable water resistant (DWR) …a water-repellent finish is more than sufficient.', price: 8000, ratings: 0, …}
13: {_id: '62a859dc978a8929754260a7', name: 'Nikey Air Max', description: 'Winter coats with a durable water resistant (DWR) …a water-repellent finish is more than sufficient.', price: 8000, ratings: 0, …}
14: {_id: '62a859dc978a8929754260ab', name: 'Nikey Air Max', description: 'Winter coats with a durable water resistant (DWR) …a water-repellent finish is more than sufficient.', price: 8000, ratings: 0, …}
15: {_id: '62a859dd978a8929754260af', name: 'Nikey Air Max', description: 'Winter coats with a durable water resistant (DWR) …a water-repellent finish is more than sufficient.', price: 8000, ratings: 0, …}
16: {_id: '62a859dd978a8929754260b3', name: 'Nikey Air Max', description: 'Winter coats with a durable water resistant (DWR) …a water-repellent finish is more than sufficient.', price: 8000, ratings: 0, …}
length: 17
[[Prototype]]: Array(0)

these are the products.

CodePudding user response：

I made a demo for your similar case. hope this helps you as the unique products will be an array without the duplicate items.

export default function App() {
  const products = ["A", "B", "A", "C", "B"];

  let uniqueProducts = products.filter((c, index) => {
    return products.indexOf(c) === index;
  });

  return (
    <div className="App">
      {uniqueProducts.map((u) => (
        <h2>{u}</h2>
      ))}
    </div>
  );
}

CodePudding user response：

const Arr = ['red','green','blue','black'];
Arr.forEach(function(value){
    if(value == 'green'){
        console.log('成功找到green!')
        return true
    }
    console.log(value)
})

CodePudding user response：

This can be of help for you:

let products  = [
  {_id: '62a', name: 'Nikey', description: 'Winter', category:'man',  price:12},
  {_id: '62a', name: 'Nikey', description: 'Winter', category:'kid',  price:12},
  {_id: '62a', name: 'Nikey', description: 'Winter', category:'woman',  price:12},
  {_id: '62a', name: 'Nikey', description: 'Winter', category:'man',  price:12},
  {_id: '62a', name: 'Nikey', description: 'Winter', category:'kid',  price:12},
  {_id: '62a', name: 'Nikey', description: 'Winter', category:'man',  price:12},
  {_id: '62a', name: 'Nikey', description: 'Winter', category:'woman',  price:12},
  {_id: '62a', name: 'Nikey', description: 'Winter', category:'kid',  price:12},
  {_id: '62a', name: 'Nikey', description: 'Winter', category:'man',  price:12},

]

uniqueCategorys=[ ... new Map(products.map(item =>
  [item['category'], item])).values() ];

console.log(uniqueCategorys)