ReactJS: NavBar

Question

I'm trying to realize in the Navbar the possibility to change the language. I have use this code:

<div className="nav-mobile">
        <div className="link-list-wrapper collapse" id="menu1">
          <nav>
                  <ul className="link-list">
                    <li><a className="list-item " onClick={this.changeLan.bind(this, this.ita)}>ITA</a></li>
                    <li><a className="list-item " onClick={this.changeLan.bind(this, this.eng)}>ENG</a></li>
                  </ul>
          </nav>
        </div>
      </div>

I would ask you:

1. How can I do to activate the language choosen in the nav-bar (not in the site, only in the navbar)? I have read the possibility to do:

    <li><a class="list-item" href="#">Link 1</a></li> <li><a class="list-item active" href="#">Link 2 Active</a></li>

But I would to "active" only the button choosen not always active like in the code.

2. Do you know why when I pass the mouse over the link appears in this way? As it is not a link.

Answer 1

Assuming in this.changeLan you change a property this.active to this.ita or this.eng : You can try

<li>
  <a 
    className={`list-item ${this.active === this.ita ? 'active': ''}`} 
    onClick={this.changeLan.bind(this, this.ita)}
  >
  ITA
  </a>
</li>
<li>
  <a 
    className={`list-item ${this.active === this. eng ? 'active': ''}`} 
    onClick={this.changeLan.bind(this, this. eng)}
  >
  ENG
  </a>
</li>

Answer 2

create a state for your selected language name it lang for example

const { lang } = this.state
...

<li>
  <a 
    className={`list-item ${lang === 'ita' ? 'active': ''}`} 
    onClick={this.setState({lang: 'ita'})}
  >
  ITA
  </a>
</li>
<li>
  <a 
    className={`list-item ${lang === 'en' ? 'active': ''}`} 
    onClick={this.setState({lang: 'en'})}
  >
  ENG
  </a>
</li>

then you just need to write css for class active for the second question change the hover css for li tags