so i have something like this :
Default value is english anyway , but i wanna display "english" instead of Select there , also if i select any other languages from the menu :
https://i.stack.imgur.com/A1iDx.png
the value still says "Select" but the content on web page changes anyway , how can i show up the value if i select anything from tag ?
code until now :
const [select, setSelectedOption] = React.useState();
const options = [
{value: 'English', label: 'English' },
{ value: 'Japanese', label: 'Japanese' },
{ value: 'Chinese', label: 'Chinese' },
{ value: 'Korean', label: 'Korean' },
{ value: 'Spanish', label: 'Spanish' },
];
const handleChange = SelectedOption => {
setSelectedOption(SelectedOption)
localStorage.setItem("lang", SelectedOption.value);
window.location.reload(false)
// history.push(window.location.pathname);
};
<div className="Language">
<h4>Language</h4>
<Select
value={select}
onChange={handleChange}
options={options}
default={options[0].value}
/>
</div>
any help would be appreciated ! The thing i am trying is .
So i've done this by now :
<h4>Language</h4>
<Select
defaultValue={options[0]}
value={select}
onChange={handleChange}
options={options}
autoFocus ={true}
/>
const handleChange = SelectedOption => {
setSelectedOption({SelectedOption})
console.log(SelectedOption)
localStorage.setItem("lang", SelectedOption.value);
window.location.reload(false)
};
The value "English" is appearing but when i change to other language the "English" value remains , but page changes it's language.
ok i got the answer after trails and error , but this remains fixed to one page only , can anyone help me if these values should be fixed when we navigate to other pages ? my current solution to the question i posted is this :
const options = [
{value: 'English', label: 'English' },
{ value: 'Japanese', label: 'Japanese' },
{ value: 'Chinese', label: 'Chinese' },
{ value: 'Korean', label: 'Korean' },
{ value: 'Spanish', label: 'Spanish' },
];
const[select, setSelectedOption] = useState(options[0].value);
const handleChange = SelectedOption => {
console.log(SelectedOption.value)
setSelectedOption(SelectedOption.value)
localStorage.setItem("lang", SelectedOption.value);
//window.location.reload(true)
history.push(window.location.pathname);
};
<div className="Language">
<h4>Language</h4>
<Select
value={select.value}
defaultValue = 'English'
onChange={handleChange}
options={options}
/>
</div>
The only issue is if i navigate to other pages , The values go away and the Tag remains empty again
I hope you manage the value of the 'select' via useState(). If so Reason for this behavior is after you select, component get re-render and set the default value again. To overcome that remove default and set the initial value to value attribute in select.
const options = [
{value: 'English', label: 'English' },
{ value: 'Japanese', label: 'Japanese' },
{ value: 'Chinese', label: 'Chinese' },
{ value: 'Korean', label: 'Korean' },
{ value: 'Spanish', label: 'Spanish' },
];
const[select, setSelectedOption] = useState(options[0].value);
const handleChange = SelectedOption => {
setSelectedOption(SelectedOption)
localStorage.setItem("lang", SelectedOption.value);
window.location.reload(false)};
<div className="Language">
<h4>Language</h4>
<Select
value={select}
onChange={handleChange}
options={options}
autoFocus ={true}
/>
</div>