score:0
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:
Source: stackoverflow.com
Related Query
- React: Dropdown showing duplicate options than given
- semantic ui react default selected options in dropdown
- Dropdown menu is not showing over table: Tailwind, React
- React Select Async options not showing
- Dynamically Select Options From Multiple Select Dropdown With Reactstrap In React js
- How to add Link/ a tag in the options of dropdown in React
- React - Navigation dropdown with only one dropdown showing at the time
- React use different value of input field than it is showing
- trying to make a React dropdown with checkbox options in it and its not working properly
- How to remove duplicate values from dropdown in react
- Dropdown menu in React not showing
- React Semantic UI - add key to options in Dropdown menu
- Loading react-bootstrap's Dropdown data on mouse hover than on mouse click in React functional component?
- React Draft Wysiwyg dropdown options not working
- React Formik Multi Select dropdown disabling all options when value array updates
- Losing dropdown select options upon filtering using react context api
- Selected dropdown value isn't showing in button in React
- React Semanti UI DropDown with onClick Even on individual Options
- How to get second duplicate value rather than first value from JSON Array in React JS using lodash?
- Who to load dropdown options from API in react JS with typescript and react saga?
- React component displaying different props than given
- React hooks- how to set options in dropdown with a variable
- Use a state with objects as options in dropdown menu : REACT
- sorting array of objects alphabetically on selecting options from dropdown in react app
- Calling more than two web services with react js and populate them to a material ui dropdown
- Passing in dropdown options in React
- in mui dropdrown, icons is not showing in dropdown after selecting option in once in react JS
- React Table is showing previous state rather than current state
- react testing library assert dropdown options are rendered in correct order
- display dropdown value select options using React Hooks
More Query from same tag
- Netlify doesn't display all website pages
- Unable to use switch toggle for dark mode in material-ui
- Using filter to show all objects except the one I am clicking on
- React: Cannot read property 'innerText' of null
- Clear way to use canvas html5 with React without render all canvas shapes all time
- React - Proper way to render dynamic content?
- How I can use refs to change styling class in ReactJS?
- React component with html text
- Updating Array on Functional Component ReactJS
- Solidity crowdsale function fails on my web page but is successful when sent directly but doesn't send ERC20 on successful transaction
- ReactJS: Save input value on blur and not on every key stroke
- Visual Studio 2017 Error initializing VroomJs.JsEngine
- How do we mock fetch in Redux Async Actions?
- Problem loading login page Reactjs - Keycloak - Spring Cloud Gateway
- React hooks: How to read & update state in hooks without infinite loops with react-hooks/exhaustive-deps rule
- Getting text from React wrapped span using webdriverio
- Calling geometry methods in react-three-fiber
- how to handle useEffect with render props in react
- UTC (elastic search) to MomentJs localtime
- Getting a TypeScript error with redux dispatch in my React app
- .map() working outside of render function, but fails when used inside render
- Why is child component not being updated?
- How do I pass value from my react component to my express API calls ?
- In React-Native, trying to access the drawer open from stack navigator in header back button
- How to use useEffect to change useState whenever a var is changed without triggering an infinite loop?
- Use string as JS file that declares a react component
- How can I use React Router to change routes from within a component that is also Routed in the Main App.js component?
- React-router: Refreshing the child page contents with hashHistory.push
- React component not refreshing when state changed
- React API Fetch Not Returning All Data But Does When Indexing