Tags:  listreactjs
Source:  Twitter logo

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) {
        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>

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

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() {

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

  handleItemClick(index) {
      activeItem: index,

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

  <App />,
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>
6 users liked answer #0dislike answer #06
mersocarlin profile pic

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
     } else { 

Hope this will help :)

1 users liked answer #1dislike answer #11
Binit Ghetiya profile pic
Binit Ghetiya

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).