CODEWITHSUNDEEP
cssreactjsstyled-components
Cansel Muti
Cansel Muti

Reputation: 608

How to change active class on a list item

I am using reactjs and assume that I have a list of items like:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

And I want change the class with styled-components. If a click 'Item 1', I want to give a style to it and if I click the other one, I want to remove active class from 'Item 1' and give it to 'Item 2'

Is it possible with styled-components?

Upvotes: 0

Views: 58

Answers (1)

illiteratewriter
illiteratewriter

Reputation: 4323

You can do something like

<ul>
  <li className={`class1 ${this.state.isItem1Active ? "active" : ""}`}>Item 1</li>
  <li className={`class1 ${this.state.isItem2Active ? "active" : ""}`}>Item 2</li>
</ul>

Now the className class1 will be applied to both the Items and the className active will be applied only to the element which is active

Upvotes: 1

Related Questions