EasyJavaScriptTypeScript

classNames Utility

ReactUtilitiesStrings

Implement solve(...args) — a clsx-style utility that builds a class
name string from its arguments:

  • strings — included as-is (skip falsy).
  • objects — keys whose values are truthy are included.
  • arrays — recursively flattened.

Returns a single space-separated string of active class names.

solve('foo', 'bar')              // 'foo bar'
solve('foo', { bar: true })      // 'foo bar'
solve({ foo: true, bar: false }) // 'foo'
solve(['a', ['b', 'c']])         // 'a b c'

Sample tests

Test #1Two strings
Input: ["foo","bar"]
Output: "foo bar"
Test #2String + object
Input: ["foo",{"bar":true,"baz":false}]
Output: "foo bar"
Test #3Object only
Input: [{"a":true,"b":false,"c":true}]
Output: "a c"
Test #4Nested array
Input: [["x",["y","z"]]]
Output: "x y z"
Test #5Falsy values skipped
Input: [null,null,false,"active"]
Output: "active"