CODEWITHSUNDEEP
javascripthtmlcsscountry-codes
Pranay kumar
Pranay kumar

Reputation: 2197

Country code select dropdown issue with countries having same country code

I have a country code select dropdown in React. Recently I came to know that the USA and Canada have the same country code. The problem is whenever I select either Canada or the USA, the USA always gets selected as both of them have a common value "1". I also have to pass and receive this data from the back-end which also makes this even more complicated.

What is the way forward? Can I write '1' as '01', and is it valid?


<option  value="1">USA (+1)</option>
<option  value="1">Canada (+1)</option>

Upvotes: 1

Views: 2189

Answers (2)

Eric Streeper
Eric Streeper

Reputation: 1154

You may run into this more than once: for instance, Kazakhstan and Russia both use +7 (there may be others, but I'm not sure).

I would recommend keeping a mapping of these on the server instead, and setting the values in your React app as the ISO 3166-1 alpha-2 country codes, or really using any unique country ID you'd like that is saved on the server. Then, you could set this code or ID as the value, and when you submit the form, let the server determine what the calling code is.

Upvotes: 1

user9706
user9706

Reputation:

This works as designed. You can use a different value as you speculated. You could also remove the value attribute, in which case the text is being passed to the server i.e. USA (+1). As you encode both the country and prefix in the text, you could extract it, or have a suitable mapping on the server side that maps a text to both a country and prefix.

Upvotes: 0

Related Questions