Octagram Labs
JavaScriptData StructuresReact
Sign in
← Back to problems

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.

Loading...
⌘/Ctrl + Enter

Run your code to see results.