How to fix a bug with navigation?

There is a component with navigation, which when clicked links change color( it is added .active ). The problem is that if you click on several points of navigation, they all will change color, what can I do to make clicking on another item the previous item ignited was removed .active?( I'm new to React, not beat)

Here's the screenshots, if I incorrectly formulated the question:
5a31635003cb0905787781.png5a31635e16781127413199.pngNav.jsx:
import React {Component} from 'react';

NavLink import from './NavLink';

import '../css/main.css';
import $ from "jquery";

import logo from './img/logo.png';
class Nav extends Component{
constructor(props){
super();
}
menuClick(){
$(this.refs.ClickItem).slideToggle(500)
}
render(){
return(
<nav>
 <a href="#" classname="menu-trigger" onclick="{()=">this.menuClick()}>Open menu</a>
 <div classname="container">
 <div classname="logo clearfix">
 <img src="{logo}" alt>
</div>
 <div classname="nav__items">
 <ul ref="ClickItem">
 the <li><navlink href="#">Home</navlink></li>
 the <li><navlink href="#">About us</navlink></li>
 the <li><navlink href="#">Shop</navlink></li>
 the <li><navlink href="#">Contact us</navlink></li>
</ul>
</div>
</div>
</nav>
);
}
}

export default Nav;


NavLink.jsx:
import React {Component} from 'react';

class NavLink extends Component{
constructor(props){
super(props);
 this.state = {
 active: "
};
 this.handleClick = this.handleClick.bind(this);
}
handleClick(){
 this.setState({active: 'true'});
}
render(){
return(
 <a onclick="{this.handleClick}" classname="{`'${this.state.active" ? 'active' : "}`} href="href" {...this.props}>{this.props.children}</a>
);
}
}
export default NavLink;
June 10th 19 at 15:19
2 answers
June 10th 19 at 15:21
Solution
You can transfer from NavLink active in Nav and store in it the index of the active element. Type so.
Thank you! - vito_Gerhold24 commented on June 10th 19 at 15:24
June 10th 19 at 15:23
then you need to start with CSS and Javascript
to react your problem has nothing, not even a tag can be removed

with the previous no one is busy, set the primary color to all elements, and then changed to the current active
well, the same thing happens when I add a clicked class .active element, but when you click on the other to him also is assigned .active - vito_Gerhold24 commented on June 10th 19 at 15:26
read carefully my comment above and rewrite it for yourself in separate steps

programming requires exceptional attention to detail, otherwise you will retire from the toaster - vito_Gerhold24 commented on June 10th 19 at 15:29

Find more questions by tags ReactJavaScript