0

Can anybody explain to me? I had such code

<Card className={clsx(classes.card, noShadow && classes.noShadow)}>

It was recommended to me to use it in this way

<Card className={clsx(classes.card, {[classes.noShadow]: noShadow})}

Can anybody explain to me in-depth how this code works {[classes.noShadow]: noShadow})

I do know JavaScript topic dot notation and bracket notation. But still, I couldn't figure out how this {[classes.noShadow]: noShadow}) parsed inside styles.

Quentin
  • 857,932
  • 118
  • 1,152
  • 1,264
Jasur Kurbanov
  • 594
  • 1
  • 6
  • 18
  • When you do `clsx({ foo:true, bar:false })` it results in `'foo'`. In your case the expression creates an object with `classes.noShadow`'s value as a key and `noShadow` as its value. If `noShadow` is true then it will be there in the final `className` string else not. However IMO, there is no specific reason to prefer this over the short-circuit notation you earlier used, other than enforcing a certain style. – brc-dd Aug 03 '21 at 07:41

0 Answers0