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 .

1. The page is already in English by default so it should display "English" as selected already in the Tag
2. If i select any other Language instead of English , then the language should replace English and display.

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.

CodePudding user response：

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>

CodePudding user response：

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