Toggle class on menu items with ReactJS

Question

I have a React-Redux application, and I have created a "Sidebar" component in which I would like to toggle 'active' class onClick of each Menu item.

The current code that I have toggles the 'active' class on all the menu items.

Here is my code:

import React, {Component} from 'react'
import {connect} from 'react-redux'

export default class Sidebar extends Component {
constructor(props) {
    super(props)

    this.toggleClass= this.toggleClass.bind(this);
    this.state = {
      activeIndex: false
    }
}

toggleClass(e) {
    const currentState = this.state.activeIndex;
    this.setState({ activeIndex: !currentState });
};

render(){
    return(
        <div id="sidebar">
            <div className="nav">
                <ul className="dashboard-menu">
                    {this.renderSidebarMenuItems}
                    <li className={this.state.activeIndex ? 'active': null}  onClick={this.toggleClass}>Menu item 1</li>
                    <li className={this.state.activeIndex ? 'active': null}  onClick={this.toggleClass}>Menu item 2</li>
                    <li className={this.state.activeIndex ? 'active': null}  onClick={this.toggleClass}>Menu item 3</li>
                    <li className={this.state.activeIndex ? 'active': null}  onClick={this.toggleClass}>Menu item 4</li>
                </ul>
            </div>
        </div>
    )
}

}

I need a solution such that onClick of each menu item only that elements class changes to 'active' and all other menu items go back empty class.

Thank you

sunt · Accepted Answer · 2017-06-22 10:00:13Z

your activeIndex should be a index number or key,like this:

import React, {Component} from 'react'
import {connect} from 'react-redux'

export default class Sidebar extends Component {
constructor(props) {
    super(props)

    this.toggleClass= this.toggleClass.bind(this);
    this.state = {
      activeIndex: 0
    }
}

toggleClass(index, e) {

    this.setState({ activeIndex: index });
};

render(){
    return(
        <div id="sidebar">
            <div className="nav">
                <ul className="dashboard-menu">
                    {this.renderSidebarMenuItems}
                    <li className={this.state.activeIndex==0 ? 'active': null}  onClick={this.toggleClass.bind(this, 0)}>Menu item 1</li>
                    <li className={this.state.activeIndex==1 ? 'active': null}  onClick={this.toggleClass.bind(this, 1)}>Menu item 2</li>
                    <li className={this.state.activeIndex==2 ? 'active': null}  onClick={this.toggleClass.bind(this, 2)}>Menu item 3</li>
                    <li className={this.state.activeIndex==3 ? 'active': null}  onClick={this.toggleClass.bind(this, 3)}>Menu item 4</li>
                </ul>
            </div>
        </div>
    )
  }

 }

Collectives™ on Stack Overflow

Toggle class on menu items with ReactJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related