codejump
EasyJavaScriptTypeScript

getDisplayName — HOC Utility

ReactHOCUtilities

When building Higher-Order Components you need to set
WrappedComponent.displayName for DevTools:

WithAuth.displayName = `WithAuth(${getDisplayName(Component)})`;

Implement solve(wrapperName, component) where component is an object
with displayName, name, or neither. Return the formatted string:

'${wrapperName}(${displayName || name || "Component"})'

Sample tests

Test #1displayName present
Input: ["WithAuth",{"displayName":"UserProfile"}]
Output: "WithAuth(UserProfile)"
Test #2name fallback
Input: ["WithTheme",{"name":"Button"}]
Output: "WithTheme(Button)"
Test #3No name → Component
Input: ["Connect",{}]
Output: "Connect(Component)"
Test #4displayName takes priority over name
Input: ["memo",{"name":"MyComp","displayName":"MyComp"}]
Output: "memo(MyComp)"
Test #5forwardRef HOC
Input: ["forwardRef",{"name":"Input"}]
Output: "forwardRef(Input)"
← All challenges