Is it possible to change languages without this? My issue is that I have a multi-step form, and if a user changes the language, the form state is reset to the initial/default which clears all progress and reverts to the first step.
Navbar component with language options...
handleChangeLng = (e, lng) => {
e.preventDefault();
this.props.i18n.changeLanguage(lng);
localStorage.setItem("lng", lng);
};
...
<Dropdown>
<Dropdown.Toggle>
Language Example
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item active={localStorage.getItem("lng") === "en" || localStorage.getItem("lng") === null} onClick={(e) => this.handleChangeLng(e, "en")}>English</Dropdown.Item>
<Dropdown.Item active={localStorage.getItem("lng") === "es"} onClick={(e) => this.handleChangeLng(e, "es")}>Espanol</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
Form Component...
render() {
const { t } = this.props;
return (
<div>
...
<h1>{t('Some text')}</h1>
...
</div>
)
}