how to prevent duplicate data from react

Question

my json object

[
  {
   "id": 1,
   "name": "Banana",
   "category": "Food"
  }
  {
   "id": 2,
   "name": "Milk",
   "category": "Food"
  }
  {
   "id": 3,
   "name": "Phone",
   "category": "Technology"
  }
]

when I map the category names found in my json data, the same category names are constantly repeating. how can I make sure this doesn't happen?

my code=

{card.map((element, i)=>{
<li>{element.category}</li>
})}

Answer 1

First of all you are missing the return statement.

{
 card.map((element, i) => {
  return <li>{card.category}</li>
 }
}

And second, you are referencing the array card not the element.

{
 card.map((element, i) => {
  return <li>{element.category}</li>
 }
}

Even better:

{
 card.map(el => <li>{el.category}</li>)
}

Answer 2

You can use Set to filter out duplicates.

const data = [{
  "id": 1,
  "name": "Banana",
  "category": "Food"
}, {
  "id": 2,
  "name": "Milk",
  "category": "Food"
}, {
  "id": 3,
  "name": "Phone",
  "category": "Technology"
}];

const result = [...new Set(data.map(item => {
      return item.category;
    }))];
    
console.log(result);

Answer 3

import jsonFile from "./file.json"

const List = () => (
  <ul>
    {jsonFile.map(({ id, category }) => (
      <li key={id}>{category}</li>
    ))}
  </ul>
);