Hands-On Design Patterns with React Native

HOC

The HOC is a pattern that exists to enhance components with additional props or functionality, for instance, if you want to make the component expandable. Instead of just creating a stateful container as we did previously, we could use the HOC pattern. Let's refactor our stateful container component to a HOC and name it makeExpandable:

// src/ Chapter_1/ Example_12_Higher_order_component_makeExpandable/ App.jsconst makeExpandable = (ComponentToEnrich) => (    class HelloBoxContainer extends React.Component {        constructor() {            super();            this.state = {                // default state on first render                expanded: false            };            this.expandOrCollapse = this.expandOrCollapse.bind(this);        }        expandOrCollapse() {            // toggle expanded: true becomes false, false becomes true