How to add and remove add class for list in reactjs?

Question

For example, just switching the active classes btw to li. But not with router. I have list like this it is not cicle with map() method. It is static list.

 constructor(props) {
        super(props);
        const parsedUrlQuery = window.location.pathname;
        this.state = {
            isActive: true
        }
    }

  <ul className='bread list-inline'>
       <li className={this.state.isActive ? 'navigation--active' : ''}>All projects</li>
       <li> My projects</li>
  </ul>

the problem is i don not know how to remove and add class for static list. Could u help me with that.

@MayankShukla I need to switch active className btw to li, but without routers. Is it possible to do that? — Feruza
– Feruza, Commented Jan 19, 2018 at 7:50

Hemerson Carlin · Accepted Answer · 2018-01-19 12:23:12Z

6

You have to change state somehow. Button click, input change or even from a child component handler of some sort.

In this example, I'm using onClick in each li element that triggers such state change:

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      activeItem: -1,
      items: ['All Projects', 'My Projects'],
    }
  }

  handleItemClick(index) {
    this.setState({
      activeItem: index,
    })
  }

  render() {
    return (
      <div>
        <ul className='bread list-inline'>
          {this.state.items.map((item, index) =>
            <li
              key={index}
              className={this.state.activeItem === index ? 'navigation--active' : ''}
              onClick={this.handleItemClick.bind(this, index)}
            >
              {item}
            </li>
          )}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

ul > li {
  cursor: pointer;
}

li.navigation--active {
  text-decoration: underline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

edited Jan 19, 2018 at 12:23

answered Jan 19, 2018 at 8:44

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Feruza Over a year ago

this method just adds the active class to first <li>, but I need to add active class when i click on of the li

Hemerson Carlin Over a year ago

@Feruza I haven't got that, sorry. I've just updated my answer. Hope it helps now :)

Binit Ghetiya · Accepted Answer · 2018-01-19 11:40:21Z

1

Let say your li is below

<li className={this.state.isActive ? 'navigation--active' : ''}>All projects</li>

Now change you li to this below LI and add OnClick function "liCkickFun"

    <li className='navigation--active' onClick={this.liCkickFun}>All projects</li>

Now in your component add below function

liCkickFun = (event) => {
  //check if clicked element has active class then remove it 
  //and if don't has class then add it
     if(event.target.classList.contains('navigation--active')){
       event.target.classList.remove('navigation--active');
     } else { 
       event.target.classList.add('navigation--active');         
     }
}

Hope this will help :)

answered Jan 19, 2018 at 11:40

Binit Ghetiya

1,9792 gold badges22 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to add and remove add class for list in reactjs?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related