CODEWITHSUNDEEP
javascriptreactjs
kb_
kb_

Reputation: 187

react update mutiple components when option is selected

I have a dropdown component where a user selects an option. i am wondering if it's possible to update all components in the site when the user changes their selection. The initial code is below:

const Languages = () => {
  const languages = [
    { value: "en", label: "EN" },
    { value: "sp", label: "SP" },
  ];

  return (
    <>
      <select
        value={languages.value}
        onChange={(e) => {
          window.localStorage.setItem('language', e.target.value);
          setValue(e.target.value);
        }}
      >
        <option>en</option>
        <option>es</option>
      </select>

      <Translator
        from='en'
        to={window.localStorage.getItem('language')}
        googleApiKey='xxx'
      >
        <p><Translate>Welcome!</Translate></p>
      </Translator>
    </>
  );
};

I am create a language selection option for the site, and will need to wrap all static text in the component, so I am needing all of the Translator components to update the to={window.localStorage.getItem('language')} when the user's selection changes.

How would I go about doing this?

Upvotes: 0

Views: 33

Answers (1)

Besufkad Menji
Besufkad Menji

Reputation: 1588

check the code below:

const Languages = () => {
//this will be chosen language
const [value, setValue] = useState(null)
const languages = [
 { value: "en", label: "EN" },
 { value: "sp", label: "SP" }
]

useEffect(() => {
//set chosen language if it exists
  setValue(window.localStorage.getItem("language"))
}, [])


return value?(
  <>
   <select
    value={value}
    onChange={(e) => {
      window.localStorage.setItem("language", e.target.value)
      setValue(e.target.value)
    }}
   >
    {
      languages.map((lang) => <option value={lang.value}>{lang.label} 
     </option>)
    }
  </select>

  <Translator
    from='en'
    to={value}
    googleApiKey='xxx'
  >
    <p><Translate>Welcome!</Translate></p>
  </Translator>
 </>
 ):null
}

Upvotes: 1

Related Questions