How to put function in React className field?

Question

I've got something like this:

const [valueA, setValA] = useState(1)
const [valueB, setValB] = useState(1)


const classHandler = (val) => {

    if (val<2) {
        return 'styles.redButt'
    } else if (val===2) {
        return 'styles.normalButt'
    } else if (val===5) {
        return 'styles.greenButt'
    } else {
        return 'styles.noneButt'
    }
}

return (<>
    <div className={classHandler(valueA), styles.buttonize}>
        FIRST INFO {valueA}
    </div>
    <div className={classHandler(valueB), styles.buttonize}>
        SECOND INFO {valueB}
    </div>

</>)

Function doesn't work, but no errors, and second class {styles.buttonize} works just fine! What am I missing?

lissettdm · Accepted Answer · 2021-01-03 15:48:23Z

1

The comma operator (,) evaluates each of its operands (from left to right) and returns the value of the last operand. In your case classHandler(valueA) is evaluated but className will be equal to styles.buttonize (last operand).

If you are using css modules, this return 'styles.redButt', won't work, instead use return styles.redButt

const classHandler = (val) => {
  if (val<2) {
        return styles.redButt
    } else if (val===2) {
        return styles.normalButt
    } else if (val===5) {
        return styles.greenButt
    } else {
        return styles.noneButt
    }
}
<div className={`${classHandler(valueA)} ${styles.buttonize}`}>
        FIRST INFO {valueA}
</div>

edited Jan 3, 2021 at 15:48

answered Jan 3, 2021 at 15:34

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

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

1 Comment

skodovany Over a year ago

Yesss! Thank You! I know I was close.... but without your help... ;-)

Collectives™ on Stack Overflow

How to put function in React className field?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related