Merge Props with Defaults

Props & Classesmedium

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

A reusable component merges caller props over its defaults, but className should combine rather than replace. Implement `mergeProps(defaults, overrides)` where overrides win for every key, except `className`, which is concatenated (`defaults.className + ' ' + overrides.className`) when both are present.

Sample tests

Input: mergeProps({"className":"btn","type":"button"}, {"className":"primary","onClick":1})

Output: {"className":"btn primary","type":"button","onClick":1}

Input: mergeProps({"size":"sm"}, {"size":"lg"})

Output: {"size":"lg"}

+ 2 hidden tests run on Submit.

Hints

Common pitfalls

A plain spread would let overrides.className fully replace the base classes.
Concatenating when only one side has a className adds a stray leading or trailing space.

Learning resources

React: Passing Props to a Component

Approach & explanation (try first)

Object spread already implements 'overrides win'. The className field is the exception: when both objects supply one, the two are joined so base and caller classes both apply, matching how component libraries compose classes.

⌘/Ctrl + Enter

Run your code to see results.

← Back to problems