I'm trying to apply reactI18next on a project, normally you to toggle the language change you would create a button that would call the "changelanguage" function like this:

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  }

<button onClick={() => changeLanguage('en')}>en</button>

However, I was wondering if it's possible to make something similar but In a dropdown fashion.

Is there a way to trigger an onClick via select or other means?

Thanks and I hope to hear you guys soon!

I'm trying to apply reactI18next on a project, normally you to toggle the language change you would create a button that would call the "changelanguage" function like this:

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  }

<button onClick={() => changeLanguage('en')}>en</button>

However, I was wondering if it's possible to make something similar but In a dropdown fashion.

Is there a way to trigger an onClick via select or other means?

Thanks and I hope to hear you guys soon!

• javascript
• reactjs
• react-hooks
• react-i18next
• language-translation

3 Answers 3

Yes this is possible, you can add onChange event handler on Select tag such as

import { useState } from "react";

export default function App() {
  const [lang , setLang] = useState('en')

  function changeLanguage(event){
    // i18n.changeLanguage(event.target.value)
    setLang(event.target.value)
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <p>{lang}</p>
      <select value={lang} onChange={changeLanguage}>
        <option value="en">English</option>
        <option value="fr">French</option>
      </select>
    </div>
  );
}

you can test on working sandbox here

You can just use the onChange prop on the <select> element.

import { useState } from "react";
const languages = {
  en: "English",
  ta: "Tagalog",
  es: "Español"
};

export default function App() {
  const [selectedValue, setSelectedValue] = useState("en");
  function onChange(e) {
    il18n.changeLanguage(e.target.value); // Use your library here
    setSelectedValue(e.target.value);
  }
  return (
    <div className="App">
      <label for="lang">Choose a language: </label>
      <select name="lang" id="lang" onChange={onChange}>
        {Object.keys(languages).map((languageKey) => (
          <option key={languageKey} value={languageKey}>
            {languages[languageKey]}
          </option>
        ))}
      </select>
      <br />
      <br />
      <p>Currently selected:</p>
      <p>Key: {selectedValue}</p>
      <p>Value: {languages[selectedValue]}</p>
    </div>
  );
}

Please try this one

const [value, setValue] = React.useState('');
const changeLanguage = (event) => {
    i18n.changeLanguage(event.target.value);
}
<select value={value} onChange={changeLanguage}>
    <option value="en">English</option>
</select>