# Actual behaviour We need to use third party libs like `clsx` to complish this very common behaviour ```ts <div className={ clsx( 'class1', condition && 'class2', condiction2 ? 'class3' : null ) } /> ``` # Wanted behaviour Use JSX to accomplish this common task directly ```ts <div className = "class1" className = { condition && 'class2' } className = { condition2 ? 'class3' : null } /> // OR <div className={ [ 'class1', condition && 'class2', condition3 ? 'class3' : null ] } /> ``` This should compile everything to somthing like : ```js React.createElement( 'div', {className: ['class1', condition && 'class2', condition2 ? 'class3' : null ] } ); ```