Proposal: combining classes using only className

[rafikalid]

Actual behaviour

We need to use third party libs like clsx to complish this very common behaviour

<div className={ clsx( 'class1', condition && 'class2', condiction2 ? 'class3' : null ) } />

Wanted behaviour

Use JSX to accomplish this common task directly

<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 :

React.createElement( 'div', {className: ['class1', condition && 'class2', condition2 ? 'class3' : null ] } );

[rafikalid]

I propose in general to compile duplicated attributes to arrays as follow:

<div
    className = "c1"
    className = "c2"
    className = "c3"
/>

// TO

React.createElement(Component, {
  className: [ 'c1', 'c2', 'c3' ]
});

and

<div
    anyAttr = "value 1"
    anyAttr = { true }
    anyAttr = { callLogic() }
    anyAttr
    !anyAttr
/>

// TO

React.createElement(Component, {
  anyAttr: [ "value1", true, callLogic(), true, false ]
});

[fabiospampinato]

This is a problem that must be solved at the framework level, React is just giving you a very basic API for setting classes, that's the problem.

[drwpow]

I personally am a big fan of Svelte’s approach, allowing not only classname combining but with easy conditions built in:

https://svelte.dev/playground/ca01d7704d2e411bbe9a9911de6ea8bb?version=5.33.16