Adding and removing class from list using Reactjs

Question

I am trying to add class active when item in list is clicked. When second item is clicked, remove class from first item and add it to second one.

I have this code so far:

  constructor(props) {

  super(props)
  this.state = {
    clicked: false,
    showComponent: "Box1"
  };
}

addClassName = () => {
    this.setState({
      clicked: true
    });
  } 
  <ul>
  <li className = {
    this.state.clicked ? 'active' : 'inactive'
  }
onClick = {() => {
    this.toggleDiv("monday");
    this.addClassName();
  }
} data-sched = "monday"> Monday </li>

  <li className = {
    this.state.clicked ? 'active' : 'inactive'
  }
onClick = {() => {
    this.toggleDiv("thursday");
    this.addClassName();
  }
}
data-sched = "tuesday" > Thursday </li> 
</ul>

The problem is when I click first item class active is applied on both (first and second item.)

It triggers function not related to question, it triggers div that supposed to be shown after click. — user9347049
– user9347049, Commented Dec 29, 2018 at 18:37
Basically, you state needs to hold which value has been clicked, not just that a value has been clicked. Also there is an obvious code duplication that you should solve. — Sulthan
– Sulthan, Commented Dec 29, 2018 at 18:49

Rajan Lagah · Accepted Answer · 2018-12-29 18:47:48Z

1

When clicked in state is true the both li tag have same class as that condition will be true for both of them. Try this.

  constructor(props) {

  super(props)
  this.state = {
    clicked: false,
    active:'',
    showComponent: "Box1"
  };
}


  <ul>
    <li className = {
      this.state.active=='monday' ? 'active' : 'inactive'
     }
     onClick = {() => {
      this.toggleDiv("monday");
      this.setState({active:'monday'})
     }
    } data-sched = "monday">
   Monday 
  </li>
  <li className = {
     this.state.active:'thursday'? 'active' : 'inactive'
    }
     onClick = {() => {
      this.toggleDiv("thursday");
      this.setState({active:'thursday'})
     }
    }
    data-sched = "thursday" >
   Thursday 
  </li> 
</ul>

edited Dec 29, 2018 at 18:47

answered Dec 29, 2018 at 18:42

Rajan Lagah

2,5381 gold badge28 silver badges46 bronze badges

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

1 Comment

Rajan Lagah Over a year ago

@user9347049 sir you get what you ask for in the question.

Sulthan · Accepted Answer · 2018-12-29 18:57:20Z

0

You have to save which value has been clicked:

constructor(props) {
  super(props)

  this.state = {
    selectedDay: null,
    showComponent: "Box1"
  };
}

And then use it directly (also removed some code duplication).

selectDay = day => {
   this.toggleDiv(day);
   this.setState({ 
     selectedDay: day
   });
}

render() {
   ...

   const days = [
      { name: 'monday', label: 'Monday' },
      { name: 'thursday', label: 'Thursday' }
   ];

   return (
     <ul>
       {days.map(day => (
         <li
             key={day.name}
             className={this.state.selectedDay === day.name ? 'active' : 'inactive'}
             onClick={() => this.selectDay(day.name)}
             data-sched={day.name}
         >
           {day.label}
         </li>
       )}
     </ul>
   );
}

answered Dec 29, 2018 at 18:57

Sulthan

130k23 gold badges223 silver badges277 bronze badges

1 Comment

user9347049 Over a year ago

Thanks for your help it is very good solution for both class adding and removing code duplication. Thanks a lot!

Collectives™ on Stack Overflow

Adding and removing class from list using Reactjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related