codejump
MediumPro challengeJavaScriptTypeScript

withLogger HOC

ReactHOCPatterns

Implement withLogger(Component) that wraps a component function and:

  • Calls the original with given props.
  • Records the props received in a shared log.
  • Returns the original output.

solve(propsList) wraps a base component (returns 'rendered:' + props.id),
calls it with each props, and returns { outputs, log }.

Sample tests

Test #1Two renders
Input: [[{"id":1},{"id":2}]]
Output: {"log":[{"id":1},{"id":2}],"outputs":["rendered:1","rendered:2"]}
Test #2No renders
Input: [[]]
Output: {"log":[],"outputs":[]}
Test #3Single render
Input: [[{"id":99}]]
Output: {"log":[{"id":99}],"outputs":["rendered:99"]}
Test #4Three same renders
Input: [[{"id":0},{"id":0},{"id":0}]]
Output: {"log":[{"id":0},{"id":0},{"id":0}],"outputs":["rendered:0","rendered:0","rendered:0"]}
Test #5Three sequential
Input: [[{"id":1},{"id":2},{"id":3}]]
Output: {"log":[{"id":1},{"id":2},{"id":3}],"outputs":["rendered:1","rendered:2","rendered:3"]}
← All challenges