Apply css class to specific element depending on state

Question

I have React component, with state managed by redux, ul list and a css-class. I want to apply class to one of li elements, depending on state. For instance, if myStateProp = a, apply css class to first li, if myStateProp = b, apply class to second li and so on. But I'm not sure how to do it properly.

For now I solved this problem like this:

<ul>
    <li className={this.props.myStateProp ==="a" ? "myCssClass" : ""}>A</li>
    <li className={this.props.myStateProp ==="b" ? "myCssClass" : ""}>B</li>
    <li className={this.props.myStateProp ==="c" ? "myCssClass" : ""}>C</li>
</ul>

But I don’t really like this approach, seems too many copied code. Maybe there is a way to do it more neatly?

I don't see how you could do it any other way, unless you had the values of the li in a var and then did a loop — Pete
– Pete, Commented Nov 29, 2018 at 12:45
Oh, I see. I'll stick to this solution then. Thanks for verification — Annie H.
– Annie H., Commented Nov 29, 2018 at 13:05
Maybe it would help if you give us a bit more code/context. There are always many possible solutions. Some more, some less elegant. From your code it looks like you are assigning the class according to the click or some similar event. If that's the case, you can maybe have some handleClick(e) function which will assign the class on e.target. It's really hard to tell without proper context. — nemanja
– nemanja, Commented Nov 29, 2018 at 14:23

Matt Carlotta · Accepted Answer · 2018-11-29 16:31:44Z

3

While there's nothing inherently wrong with your code, you could simplify it with a class method ternary statement and return "myCssClass" or null.

class Example extends PureComponent {

  isActive = item => this.props.someProp === item ? "myCssClass" : null  

  render = () => (
    <ul>
      <li className={isActive("a")}>A</li>
      <li className={isActive("b")}>B</li>
      <li className={isActive("c")}>C</li>
    </ul>
  )
}

Or, take it one step further and simplify your li elements (while less repetitive, it does abstract what's happening):

const listItems = ["a","b","c"];

class Example extends PureComponent {

  isActive = item => this.props.someProp === item ? "myCssClass" : null  

  render = () => (
    <ul>
      {listItems.map(item => (
        <li key={item} className={isActive(item)}>
          { item.toUpperCase() }
        </li> 
      ))}
    </ul>
  )
}

edited Nov 29, 2018 at 16:31

answered Nov 29, 2018 at 16:20

Matt Carlotta

19.8k5 gold badges42 silver badges56 bronze badges

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

1 Comment

Annie H. Over a year ago

Thank you, that's the solution I was looking for

Oleg Pinchuk · Accepted Answer · 2018-11-29 13:37:09Z

0

You can create function which will return classname

const classNames = (data)=>{
   swtich/case/if... what you want

   return 'SomeClassName'
}

<li className={this.classNames(dataFromStore)}>C</li>

answered Nov 29, 2018 at 13:37

Oleg Pinchuk

561 silver badge6 bronze badges

2 Comments

Annie H. Over a year ago

But isn't it assumes that I should have different classes for every element?

Oleg Pinchuk Over a year ago

yep, sorry a bit unclear your question. Unswer upper is good for you!

Collectives™ on Stack Overflow

Apply css class to specific element depending on state

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related