Reactjs multiple conditional classes

Question

I am new to reactjs - looking to add some conditional class that come into action on the 3rd and 4th item in a loop

<div className={'medium-20 large-12 columns' + (index === 3 ? 'medium-push-10' : null)}>

if index 3 -- medium-push-10
if index 4 -- medium-pull-10

You could add to the ternary as mentioned in the answer. Or, if you're testing several conditions, why not just add a new function that returns the desired class? — Skäggiga Mannen, May 26 '17 at 13:49
That's a good idea too - well - take a peak at the concept in the comment to that answer — The Old County, May 26 '17 at 13:54
Does this answer your question? [ReactJS conditional component display](https://stackoverflow.com/questions/45503374/reactjs-conditional-component-display) — Aliasghar Ahmadpour, Feb 18 '22 at 14:55

Tom Van Rompaey · Accepted Answer · 2017-05-26T14:15:06.830

3

For a quick solution you can add another Conditional Operator inside the second result of the first Conditional Operator.

<div className={'medium-20 large-12 columns' + (index === 3 ? ' medium-push-10' : index === 4 ? ' medium-pull-10' : '')}>

Don't go to far with this however, otherwise your code will soon be unreadable.

edited May 26 '17 at 14:15

answered May 26 '17 at 13:40

Tom Van Rompaey

3,556
20
22

- Why do you advise caution. – The Old County May 26 '17 at 13:52
to really enhance this -- I suppose if there are not enough items on the very last row -- so in an ipad view - where its 3 items per row -- and lets say the last row only has 2 items - that's where the medium-push-10 comes in – The Old County May 26 '17 at 13:52
I've changed it to just use '' instead of null otherwise you create a null class -
– The Old County May 26 '17 at 13:53
@TheOldCounty, if you go to far with this (Condition inside Condition inside Condition inside.... ), it will be very difficult to understand your code in the future. A better solution would be to create a function `getIndexClass(index)` where you use the Switch Statement and return the correct class based on the index parameter. Then your JSX can look like this: `
` Yes, you are right. It adds null to the class when returning null. I've edited my answer with your suggestion.
– Tom Van Rompaey May 26 '17 at 14:23
Yeah - ok - ideally this needs to be a modulas - like index % 3 -- index % 4 -- thoughts? – The Old County May 26 '17 at 14:32

score 1 · Answer 2 · answered Dec 15 '17 at 08:41

You can use this npm package. It automatically handles everything (string,array,objects,functions,null,undefined) and has options for static and conditional classes based on a variables with a simple syntax. All in 1kb.

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});
// "class1 class2 class3 class4 class6"

<div className={getClassNames('show',{class1: true, class2 : false})} />
// "show class1"

Reactjs multiple conditional classes

2 Answers2