How to use the recompose/compose function in recompose

handleSelect={handleSelect}
                selectAll={selectAll}
              />
            )
            : null}
          {/* {scriptDisplay ?  : null} */}
          {/* {saveLoadDisplay ?  : null} */}
      
    );
    /* eslint-enable */
  }
}


// export default withRouter(MainContainer);
export default compose(
  withRouter,
  withStyles(),
)(MainContainer);

initMessage()}
                tipText={`Message ${user.name}`}
                tipLocation={'top-left'}
              />
            )}
          
        
      );
  }
};

const User = compose(
  displayLoadingCard,
  withRouter,
  withCurrentUser
)(UserWithData);
const mapStateToProps = state => ({
  initNewThreadWithUser: state.directMessageThreads.initNewThreadWithUser,
});
// $FlowFixMe
export default connect(mapStateToProps)(User);

style={{
          transform: `translate3D(0,0,0) scale(${scale}, ${scale})`,
        }}
      >
        <div>
          {text}
        </div>
      
    )
  }
  
);

export const clusterMarkerHOC = compose(
  defaultProps({
    text: '0',
    styles: clusterMarkerStyles,
    initialScale: 0.6,
    defaultScale: 1,
    hoveredScale: 1.15,
    hovered: false,
    stiffness: 320,
    damping: 7,
    precision: 0.001,
  }),
  // pure optimization can cause some effects you don't want,
  // don't use it in development for markers
  pure,
  withPropsOnChange(
    ['initialScale'],

pushToast={pushToast}
              uploadDeviceImage={uploadDeviceImage}
            />
          )) : <div>
            
          </div>
        }
      
    
  
);

export default compose(
  pure,
  withState('filterKey', 'setFilterKey', ''),
)(Devices);

return (
      
        <div>
          {disabled ? this.disabledChildren() : children}
        </div>
      
    );
  }
}

const EnhancedInputGroup = compose(
  withStyleProps({
    hasSize: true
  }),
  defaultProps({
    classPrefix: 'input-group'
  })
)(InputGroup);

setStatic('Addon', InputGroupAddon)(EnhancedInputGroup);
setStatic('Button', InputGroupButton)(EnhancedInputGroup);

export default EnhancedInputGroup;

style={{ marginRight: 8, marginVertical: 8 }}
      />
      <select value="{selected.channel}" placeholder="{{">
          onSelectedChange({ community: selected.community, channel: value })
        }
        style={{ marginVertical: 8 }}
      /&gt;
    
  );
};

export default compose(
  ViewNetworkHandler,
  getComposerCommunitiesAndChannels
)(LocationPicker);
</select>

navigation.navigate({
                routeName: `Channel`,
                key: channel.id,
                params: { id: channel.id },
              })
            }
          >
            {channel.name}
          
        )}
      
    );
  }
}

export default compose(withNavigation)(CommunityHeader);

accessType: PropTypes.string.isRequired,
    accessOptions: PropTypes.object.isRequired,
    primaryText: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
    disabled: PropTypes.bool,
    secondaryText: PropTypes.string,
    onRemove: PropTypes.func,
};

Access.defaultProps = {
    secondaryText: undefined,
    onRemove: undefined,
    disabled: false,
};

export const GroupAccess = compose(
    mapProps(useAccessObjectFormat),
    withProps(props => ({
        accessType: props.groupType,
        primaryText: props.groupName,
        accessOptions: {
            meta: { canView: true, canEdit: true, noAccess: false },
            data: props.dataShareable && {
                canView: true,
                canEdit: true,
                noAccess: true,
            },
        },
    }))
)(Access);

export const ExternalAccess = compose(

);
  }
}

const map = (state: ReduxState): * => ({ toasts: state.toasts });
export default compose(
  connect(map),
  withTheme
)(Toasts);

);
    }
}

Login.propTypes = {
    ...propTypes,
    authProvider: PropTypes.func,
    previousRoute: PropTypes.string,
    translate: PropTypes.func.isRequired,
    userLogin: PropTypes.func.isRequired,
};

const mapStateToProps = state => ({ isLoading: state.admin.loading > 0 });

const enhance = compose(
    translate,
    reduxForm({
        form: 'signIn',
        validate: (values, props) => {
            const errors = {};
            const { translate } = props;
            if (!values.username) {
                errors.username = translate('ra.validation.required');
            }
            if (!values.password) {
                errors.password = translate('ra.validation.required');
            }
            return errors;
        },
    }),
    connect(