I have two kinds of components for two languages one is EN other is FA, so I decide to run them just when HTML tag, attribute lang is equal to EN or FA,i put app.js like this:
if(document.documentElement.lang ==='fa'){
return (
<div>
<Header></Header>
<Conference></Conference>
<Achievements></Achievements>
<Howtoapply></Howtoapply>
<News></News>
<Events></Events>
<Calendar></Calendar>
<Overview></Overview>
<Footer></Footer>
</div>
);
}
else{
return (
<div>
<Headeren></Headeren>
<Howtoapplyen></Howtoapplyen>
<Foreignstudents></Foreignstudents>
<Conferenceen></Conferenceen>
<Achievementsen></Achievementsen>
<Newsen></Newsen>
<Eventsen></Eventsen>
<Calendaren></Calendaren>
<Overviewen></Overviewen>
<Footeren></Footeren>
</div>
);
}
}
it's ok, I put onclick for HTML tag attribute lang in header.js, but it's not working i think react just load the app.js with default index.html, HTML attribute, and when header.js change it,app.js if is not work. Header.js code is:
function changelang(){
document.documentElement.lang='en';
}
return (
<header>
<div className='topbar'>
<nav className="navbar navbar-expand-lg">
<div className="container-fluid">
<label className="topbar-lable" htmlFor=''>دسترسی سریع:</label>
<ul className="navbar-nav me-auto mb-lg-0">
<li className="nav-item">
<button onclick={changelang}>EN</button>
</li>
</ul>
</div>
</nav>
</div> ```
As samuellawrentz told you in the comments, you need a state variable. You should do something like this:
const [lang, setLang] = useState("fa"); //Here I set "fa" as the default language
document.documentElement.lang = lang;
function changelang() {
setLang("en");
}