score:0

Accepted answer

value = {localstorage.getitem("lang") || "en"} - set the value props to the select.

try this approach,

       <select name="en" id="en"
            value = {localstorage.getitem("lang") || "en"}
            onchange={(e) => {
                localstorage.setitem("lang", e.target.value);
                window.location.reload(false);}}>
            <option value="en">en</option>
            <option value="th">th</option>
        </select>

score:1

the first one showing is the selected option you had wrote here:

<option selected={localstorage.getitem("lang")}>
             {localstorage.getitem("lang").touppercase()}
          </option>

the second one when you display the dropdown, is your selected one and i believe that's how the select element works by default. i don't know how to change that behavior.

now, the third and fourth options are the ones you wrote here:

<option value="en">en</option>
<option value="th">th</option>

i would do something like:

{(localstorage.getitem("lang")) === en ? 
<option value="th">th</option> : 
<option value="en">en</option>)}

that way, you would only have the selected one, and the not selected one as options. the way you have wrote the code it will always show an en and a th option regardless the selected option.

edit: after looking the code again, i don't understand why you fetch the selected lang as an option. it would be easier to just to:

 <select
         name="en"
         id="en"
         onchange={(e) => {
                      localstorage.setitem("lang", e.target.value);
                      window.location.reload(false);
                    }}
      >
       
          <option selected value="en">en</option>
          <option value="th">th</option>
 </select>

also, i would rename the "name" and "id" of the select, to something like langselector or anything like that and not having it related to a specific option, because that could change depending on the user decision.

if you really want to just have two options (actually one), i would look at this answer as a guide and make the placeholder a conditional based on the "lang" stored on your local storage, and the option would be a conditional too, like the example i already gave:

https://stackoverflow.com/a/30525521/14492009


Related Query

More Query from same tag