data is getting diisplayed twice in list in react

Question

I am getting data in the below format.

[
  {
    "country_id": 1,
    "country_name": "INDIA",
    "insurance_id": {
      "insurance_id": 1,
      "insurance_name": "LIC",
      "createdAt": "2022-04-07T07:33:34.929Z",
      "modifiedAt": "2022-04-07T07:33:34.929Z",
      "deletedAt": null
    }
  },
  {
    "country_id": 2,
    "country_name": "INDIA",
    "insurance_id": {
      "insurance_id": 101,
      "insurance_name": "HDFC",
      "createdAt": "2022-04-07T07:33:09.698Z",
      "modifiedAt": "2022-04-07T07:33:09.698Z",
      "deletedAt": null
    }
  },
  {
    "id": "7e71625d-cf8e-4793-ba15-2d84338fde13",
    "createdAt": "2022-04-07T11:13:30.452Z",
    "modifiedAt": "2022-04-07T11:13:30.452Z",
    "deletedAt": null,
    "country_id": 3,
    "country_name": "PAKISTAN",
    "insurance_id": null
  }
  }
]

I need to display country_name in the list. this value is duplicate in above data so it is coming twice. I need to display only one time in list.

below is my code.

const [countryName, setCountryName]=useState([]);
const fetchCountry = async ()=>{
        const {data}= await httpClient.get( config.resourceServerUrl+"/country");
        data.length>0? setCountryName(data): setCountryName([]);
     }

I am using react-select component to display list.

<Select
      id="country" 
      name="contry"   
      placeholder="Select the Country"
      className="align-items-center justify-content-center"
      options={countryName.map((country:Country)=>
             ({ label: country.country_name, value: country.id })
     )}
     onChange={selectInsurer}
  />

how can I make this list unique?

India is in the data twice ... computer languages are basically dumb, they do exactly what you tell them to do, there's no "oh, wait, I already have that one so lets not do that again" - besides, the list IS unique ... the country_id is, anyway — Bravo, Apr 07 '22 at 12:20
Make your own unique custom country array list based on country names. And then render that list. — p4avinash, Apr 07 '22 at 12:21
of course, the issue is that the two India's have different country_id - that would suggest an issue with the source of the data - where is the data coming from? is it something you wrote? — Bravo, Apr 07 '22 at 12:22
thank you. is there anyway I can customize the same in react in UI? I can fetch unique data from backend but I am accessing all data at once to use of other data as well. — Shruti sharma, Apr 07 '22 at 12:23
`setCountryName([...new Set(data.map(({country_name})=>({country_name})))])` — Bravo, Apr 07 '22 at 12:25
@Bravo Yes, I wrote the same. the data wil be duplicate because same country can have 2 insurance companies so countryname will be duplicate. should I call API twice once for unique record and once for all data? is it advisable? — Shruti sharma, Apr 07 '22 at 12:25
@ShrutiSharma - you didn't write the same, because there will be no duplicates - by the way, I'd use `({ label: country.country_name, value: country.country_name })` for the select - since one country can have more than one id and in fact, for `India` it can have NO `.id` at all — Bravo, Apr 07 '22 at 12:27
sorry, typo `setCountryName([...new Set(data.map(({country_name})=>country_name))])` — Bravo, Apr 07 '22 at 12:31

score 1 · Answer 1 · answered Apr 07 '22 at 12:22

1

You can create a list with all the values from your file, even the duplicate ones, then you can refer to this this question and the accepted answer, it shows you how to create a unique list from a list with duplicates.

answered Apr 07 '22 at 12:22

robinood

1,138
8
16

score 1 · Accepted Answer · answered Apr 07 '22 at 12:24

You can preprocess your list before giving it to the Select component, like this:

const uniqueCountries = [];
for(let country of countryName){
   if(!uniqueCountries.find(c => c.country_name === country.country_name)){
      uniqueCountries.push(country);
   }
}

score 1 · Answer 3 · answered Apr 07 '22 at 12:25

1

I would create a new list containing only distinct country names, like this:

const countries = new Set()
obj.forEach(country => countries.add(country.country_name))
const list = Array.from(countries) // pass this array as options prop

answered Apr 07 '22 at 12:25

BiciAP

112
7

data is getting diisplayed twice in list in react

3 Answers3