Props and className Builder

Props & Classesmedium

Course · Section 9: Data Structures, Modern Operators and Strings · Lecture 111: The Spread Operator (...)

Implement two helpers used when rendering a component: - `mergeProps(defaults, props)` merges props over defaults (props win). - `classNames(map)` returns a space-separated string of the keys whose values are truthy.

Examples

Input: mergeProps({size:'md',disabled:false},{size:'lg'}); classNames({btn:true, disabled, [size]:true})

Output: props {size:'lg',disabled:false}, class 'btn lg'

props override defaults; only truthy class keys are joined.

Sample tests

Input: merge props, build class

Output: [{"size":"lg","disabled":false},"btn lg"]

Input: classNames filters falsy

Output: "a c"

+ 1 hidden test run on Submit.

Hints

Common pitfalls

Spreading props before defaults lets defaults override real values.
Including falsy class keys in the output.

Learning resources

React: Passing Props to a Component

Approach & explanation (try first)

These two helpers are the everyday glue of component rendering: resolving props with defaults and building conditional class strings.

⌘/Ctrl + Enter

Run your code to see results.

← Back to problems