Hands-On Design Patterns with React Native

HOC composition

The primary reason to create HOCs it to have the ability to compose the features they provide.

Look at the problem from the previous section again. What if we could delegate work to another HOC? For instance, having a mapper HOC called mapPropNames, you can compose it with our previous HOC like this:

makeExpandable(mapPropNames(SomeSection));

Here is the implementation of mapPropNames:

// src/ Chapter_1/ Example_15_HOC_Composition/ App.jsconst mapPropNames = (Component) => (props) => (    <Component        {...props}        isVisible={props.isExpanded}        showHideBox={props.expandOrCollapse}    />);

Nice and quick, isn't it? This is a common pattern and is also used when working with backend data sent as JSON. It may adapt the data format to our ...