how to correctly map an obj and return a single value with several identical values ReactJS

I would like to explain my problem of the day.

currently i have an array of object

I map this table

[
 { id: "a", location: "FR", zone: "EU" } ,
 { id: "b", location: "FR", zone: "EU" } , 
 { id: "c", location: "ES", zone: "EU" } , 
 { id: "d", location: "ES", zone: "EU" } ,
]

to sort all the data I use a useEffect to retrieve only the values ​​I need

useEffect(() => {
    if (data) {
        const location = data.map((e) => {
            return {
                label: e.location,
            };
        });

        setLocations(locations);
    }
}, [data]);

this works correctly.

except which returns me the following format

0: {label: 'FR'}
1: {label: 'FR'}
2: {label: 'ES'}
4: {label: 'ES'}

and I would like to have the following format

  0: {label: 'FR'}
  1: {label: 'ES'}

basically it removes the identical key

iam open to any proposal thank you very much.

>Solution :

Since you’re using location as an id-like property that determines the uniqueness, you can do:

const data = [
  { id: "a", location: "FR", zone: "EU" } ,
  { id: "b", location: "FR", zone: "EU" } , 
  { id: "c", location: "ES", zone: "EU" } , 
  { id: "d", location: "ES", zone: "EU" } ,
];

console.log(
  Array
    .from(new Set(data.map(d => d.location)))  
    .map(label => ({ label }))
  
)

This first transforms the list to an array of strings. It uses a Set to get rid of duplicate strings. Then, it transforms to the desired output format.

• data.map(d => d.location) gives [ "FR", "FR", "ES", "ES" ]
• Array.from(new Set(...)) gives [ "FR", "ES" ]
• (...).map(label => ({ label })) gives the final output