lukeed/clsxPublic

A tiny (239B) utility for constructing `className` strings conditionally.

Undefined class name gets printed

JB

just-boris opened ·

I have this code

```js import styles from './styles.css';

clsx({[styles.active]: isActive}); // returns "undefined" when `styles.active` is undefined ```

[Live demo](https://runkit.com/just-boris/62a76786f530d400096615bd)

Ideally this should work the same way as this code: `clsx(isActive && styles.active)`

  1. JB
    just-boris
    Author

    A possible fix would be to extend this line: https://github.com/lukeed/clsx/blob/74cefa60314506f93a4db565c59152c6c0a2295c/src/index.js#L18

    ```diff -if (mix[k]) { +if (mix[k] && mix[k] != 'undefined') { ```

    But I am not sure if it is an acceptable size increase for the library

  2. LU
    lukeed

    This is intentional & matches `classnames` behavior.

    As you've seen, when the key is evaluated, it's the _string_ "undefined", which could very well be an intended classname as it's also valid.

  3. lukeedclosed4 years ago on GitHub