Toggle active class for the child or its relevant siblings onClick in React

Question

When I click on a navigation link, I can successfully toggle the state.navigation between true and false which then sets the class on the navigation component.

However it only changes the link I have clicked on without swapping the other ones back ! I need a solution that also removes all the active links form the NavItems I have previously clicked.

 class NavItem extends Component{ 

    constructor(props) {
      super(props);

      this.state = {
          navigation: false,
      };
  }

     toggleClass() {

      this.setState({ navigation: !this.state.navigation });

  };

    render(){
        return(
                <li><Link 
                    to={ this.props.href } 
                    className={ this.state.navigation ? 'active' : null } 
                    onClick={ () => this.toggleClass() }>{ this.props.text }</Link>
                </li>
            )
    }

}

class Navigation extends Component{ 

    render() {
        return(
            <nav>
                <ul>
                    <NavItem href='galleries' text='Galleries' />
                    <NavItem href='archive' text='Archive' />
                    <NavItem href='news' text='News' />
                    <NavItem href='about' text='About' />
                    <NavItem href='contact' text='Contact' />
                    <NavItem href='map' text='Map' />
                </ul>
              </nav>
        )
    }

}

Answer 1

You need to lift your state up and implement the same logic like

class NavItem extends Component{ 

     toggleClass = ()  => { 
       this.props.toggleClass(this.props.text);
     };

    render(){
        return(
                <li><Link 
                    to={ this.props.href } 
                    className={ this.props.active ? 'active' : null } 
                    onClick={this.toggleClass}>{ this.props.text }</Link>
                </li>
            )
    }

}

class Navigation extends Component{ 


    constructor(props) {
       super(props);

       this.state = {
          navigation: '',
       };
    }
    toggleClass = (items) => {
       this.setState(prevState => ({ navigation: prevState.navigation === items? '': items }));
    };
    render() {

        return(
            <nav>
                <ul>
                    <NavItem href='galleries' text='Galleries' toggleClass={this.toggleClass} active={this.state.navigation === 'Galleries'}/>
                    <NavItem href='archive' toggleClass={this.toggleClass} text='Archive' active={this.state.navigation === 'Archive'}/>
                    <NavItem href='news' toggleClass={this.toggleClass} text='News' active={this.state.navigation === 'News'}/>
                    <NavItem href='about' toggleClass={this.toggleClass} text='About' active={this.state.navigation === 'About'}/>
                    <NavItem href='contact' toggleClass={this.toggleClass} text='Contact' active={this.state.navigation === 'Contact'}/>
                    <NavItem href='map' toggleClass={this.toggleClass} text='Map' active={this.state.navigation === 'Map'} />
                </ul>
              </nav>
        )
    }

}