Skip to content
intermediate

Pin it down: the cases that make a classnames helper unambiguous

Implement this from the stub. Hidden tests grade the behaviour you write, not the comments you leave.

Every React codebase has a `cn()`. Ask for one and you will get something that handles `cn('btn', 'active')`. It will also do *something* with `false && 'active'`, with `{ hidden: isHidden }`, and with a nested array from a variadic helper — and each of those somethings is a decision somebody made without telling you.

export type CnArg =
  | string
  | false
  | null
  | undefined
  | Record<string, boolean>
  | CnArg[]

export interface Case {
  args: CnArg[]
  expected: string
}

/**
 * The cases that pin the description down.
 *
 * To pass, this list must accept the correct implementation and reject
 * each of the four wrong ones. A case whose `expected` is not what the
 * description requires will fail against the correct implementation, so
 * getting the values right is part of the exercise.
 */
export const CASES: Case[] = [
  // Your cases here
]
challenge — implement from scratchCtrl+↵ submits · Ctrl+Shift+↵ runsstarter code