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? <div className={ this.giveMeMyClass(index) } — Skäggiga Mannen
– Skäggiga Mannen, Commented May 26, 2017 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
– The Old County, Commented May 26, 2017 at 13:54
Does this answer your question? ReactJS conditional component display — Aliasghar Ahmadpour
– Aliasghar Ahmadpour, Commented Feb 18, 2022 at 14:55

Tom Van Rompaey · Accepted Answer · 2017-05-26 14:15:06Z

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, 2017 at 14:15

answered May 26, 2017 at 13:40

Tom Van Rompaey

3,58622 silver badges22 bronze badges

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

5 Comments

The Old County Over a year ago

- Why do you advise caution.

The Old County Over a year ago

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 Over a year ago

I've changed it to just use '' instead of null otherwise you create a null class - <div className={'medium-20 large-12 columns' + (index === 3 ? ' medium-push-10 ' : index === 4 ? ' medium-push-10 ' : '')}>

Tom Van Rompaey Over a year ago

@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: <div className={'medium-20 large-12 columns' + this.getIndexClass(index)}> Yes, you are right. It adds null to the class when returning null. I've edited my answer with your suggestion.

The Old County Over a year ago

Yeah - ok - ideally this needs to be a modulas - like index % 3 -- index % 4 -- thoughts?

Tushar Sharma · Accepted Answer · 2017-12-15 08:41:45Z

1

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"

answered Dec 15, 2017 at 8:41

Tushar Sharma

3022 silver badges15 bronze badges

Collectives™ on Stack Overflow

Reactjs multiple conditional classes

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related