React › Internationalization (i18n) in React
How would you let a user switch the language of an app using a simple dropdown menu?
BeginnerAnswer
You store the currently selected language in state or context, and a select dropdown lets the user change that value. Whenever the language changes, the translation library updates so all the text on the page immediately switches to the newly chosen language.
function LanguageSwitcher() {
const { i18n } = useTranslation();
return (
<select onChange={(e) => i18n.changeLanguage(e.target.value)}>
<option value="en">English</option>
<option value="fr">French</option>
</select>
);
}Real-world example A website's header includes a simple language dropdown, and choosing a new language instantly updates every piece of translated text on the page, without needing to reload the browser.