codejump
EasyJavaScriptTypeScript

mergeProps

ReactPropsPatterns

Implement solve(defaultProps, userProps) that merges two prop objects:

  • User props override default props.
  • Event handlers (keys starting with on) are composed: call both

the default handler then the user handler (in that order).

  • All other props use the user value when provided.
solve(
  { onClick: () => log('default'), className: 'btn' },
  { onClick: () => log('user'),   className: 'btn-primary' }
)
// Returns a merged object where onClick calls both handlers

Since handlers produce side effects, the test drives them via call order
tracking.

Sample tests

Test #1Partial override, defaults kept
Input: [{"id":"x","className":"a"},{"id":"y"}]
Output: {"id":"y","className":"a"}
Test #2Object prop overridden
Input: [{"style":{"color":"red"}},{"style":{"color":"blue"}}]
Output: {"style":{"color":"blue"}}
Test #3Boolean prop override
Input: [{"disabled":false,"data-testid":"btn"},{"disabled":true}]
Output: {"disabled":true,"data-testid":"btn"}
Test #4Default type kept, value overridden
Input: [{"type":"button","value":""},{"value":"Submit"}]
Output: {"type":"button","value":"Submit"}
Test #5Non-handler props override
Input: [{"className":"btn"},{"className":"btn-primary"}]
Output: {"className":"btn-primary"}
← All challenges