I have a language change option from select in my code but want it through a link onClick event. The select-> option method is working but I can’t seem to make it work through onClick. I am sure I am missing something in my code but can’t seem to figure it out. When “en” is clicked, I want English and when “es” is clicked, Spanish which accesses the individual language files. Here is the code:
App.js
import React, { Component } from 'react';
import './App.css';
import { HashRouter as Router, Route } from 'react-router-dom';
import Home from './pages/Home';
import Portfolio from './pages/Portfolio';
import Work from './pages/Work';
import Servicios from './pages/Servicios';
import Contacto from './pages/Contacto';
import Team from './pages/Team';
import Aviso from './pages/Aviso';
class App extends Component {
render() {
const { lang } = this.props;
return (
<Router basename="/">
<div>
<Route exact path='/' component={Home} />
<Route exact path='/Portfolio' component={Portfolio} />
<Route exact path='/Work' component={Work} />
<Route exact path='/Servicios' component={Servicios} />
<Route exact path='/Contacto' component={Contacto} />
<Route exact path='/Team' component={Team} />
<Route exact path='/Aviso' component={Aviso} />
</div>
</Router>
);
}
}
export default App;
en.js
export default {
slogan: 'Message A'
}
es.js
export default {
slogan: 'Mensaje A'
}
Main.js
import React, { Component } from 'react';
import '../App.css';
import LogoImage from '../assets/img/LogoRRspark-Trans.png';
import counterpart from 'counterpart';
import Translate from 'react-translate-component';
import en from '../lang/en';
import es from '../lang/es';
counterpart.registerTranslations('en', en);
counterpart.registerTranslations('es', es);
counterpart.setLocale('es');
class Main extends Component {
render() {
return(
<div className="main-grid-container">
<div className="item1">
<div className="item-wrapper">
<div className="image-holder">
<img className="logo-image" src={LogoImage} alt="Logo" />
<Translate content="slogan" component="h1" className="uppercase" />
</div>
</div>
</div>
<div className="item2">
<div className="item-wrapper-2">
<h3 className="promo-header">Your web and app<br /> heavy lifters</h3>
<div className="center-obj">
<a href="/Work" className="button-box button-text-1">Check out how we work</a>
</div>
</div>
</div>
<div className="item3">
<div className="item-wrapper-3">
<div id="show-hide">
<div id="outer" className="outer">
<h1 className="services">SERVICIOS</h1>
</div>
<div id="inner">
<div className="services-menu">
<ul className="list-items">
<li className="service-links">
<a href="http://rrspark.com" style={{position: 'relative', zIndex: 50}}>Sitio Web</a>
</li>
<li className="service-links">
<a href="http://rrspark.com" style={{position: 'relative',zIndex: 50}}>E-Commerce</a>
</li>
<li className="service-links">
<a href="http://rrspark.com">Contenido Web</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="item4">
<div className="container">
<div className="row">
<div className="col standard-info">
<p className="footer-text">info@rrspark.com</p>
<p className="footer-text">MX (55) 5762 7080</p>
<p className="footer-text">USA (206) 905 9934</p>
</div>
<div className="col">
<div className="room-to-breathe">
<div className="social">
<a href="/Contacto" className="footer-contact-button">CONTACTO</a>
</div>
<a href="#"><i className="fab fa-linkedin-in"></i></a>
<a href="#"><i className="fab fa-instagram"></i></a>
<a href="#"><i className="fab fa-facebook-f extra-padding-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Main
Nav.js
import React, { Component } from 'react';
import '../App.css';
import { NavLink } from 'react-router-dom';
import counterpart from 'counterpart';
import Translate from 'react-translate-component';
import en from '../lang/en';
import es from '../lang/es';
counterpart.registerTranslations('en', en);
counterpart.registerTranslations('es', es);
counterpart.setLocale('es');
class Nav extends Component {
openNav() {
document.getElementById("mySidenav").style.width = "360px";
}
closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
state = {
lang: 'es'
}
onLangChange = (e) => {
this.setState({lang: e.target.value});
counterpart.setLocale(e.target.value);
}
render() {
const { lang } = this.props;
return (
<div id="mySidenav" className="sidenav">
<div className="menu-wrapper">
<a href="javascript:void(0)" className="closebtn" style={{cursor: "pointer"}} onClick={() => this.closeNav()}>×</a>
<NavLink exact to="/" activeClassName="active a-link">- <span className="big-cap">I</span>NICIO</NavLink>
<NavLink exact to="/Portfolio" activeClassName="active a-link">- <span className="big-cap">P</span>ORTFOLIO</NavLink>
<NavLink exact to="/Work" activeClassName="active a-link">- <span className="big-cap">H</span>OW <span className="big-cap">W</span>E <span className="big-cap">W</span>ORK</NavLink>
<NavLink exact to="/Servicios" activeClassName="active a-link">- <span className="big-cap">S</span>ERVICIOS</NavLink>
<NavLink exact to="/Contacto" activeClassName="active a-link">- <span className="big-cap">C</span>ONTACTO</NavLink>
</div>
<div className="sidebar-content">
<p>Suspendisse et magna eget diam ultrices elementum. Duis molestie suscipit dui, eu finibus lorem gravida sed. Vestibulum nec diam non nisl aliquet auctor in at nulla. Sed at gravida nisi, eu semper magna. Phasellus quam nisi, vestibulum a iaculis nec, molestie ut quam. Fusce lacus metus, viverra vitae hendrerit in, ultrices ac nibh.
<br />Cras interdum magna et sem fermentum efficitur. Quisque vitae accumsan sapien. Donec et magna at risus tristique facilisis. Proin ornare diam et urna imperdiet eleifend.</p>
</div>
<div className="sidebar-content">
<div className="wrapper">
<NavLink exact to="/Team" activeClassName="active" className="team-button a-link-2">Nuestro equipo base</NavLink><br />
<NavLink exact to="/Aviso" activeClassName="active" className="aviso a-link-2">Aviso de Privacidad</NavLink>
<p className="copy">©2019 RRspark</p>
</div>
</div>
<div className="colored-side">
<div className="link-holder">
<a className="language" style={{cursor: "pointer"}} value={this.state.lang} role="button" id="en" onClick={this.onLangChange}>EN</a>
<a className="language" style={{cursor: "pointer"}} value={this.state.lang} role="button" id="es" onClick={() => this.onLangChange('es')}>ES</a>
<select value={this.state.lang} onChange={this.onLangChange}>
<option value="en">EN</option>
<option value="es">ES</option>
</select>
</div>
<span className="button-area" style={{cursor: "pointer"}} onClick={() => this.openNav()}>+</span>
<h3 className="colored-side-slogan">RRspark Stellar Web Studio</h3>
</div>
</div>
);
}
}
export default Nav
Advertisement
Answer
Because you are passing an explicit value, no need of events here:
onLangChange = (lang) => {
this.setState({ lang });
counterpart.setLocale(lang);
}