reactjs - Creating an HOC for React Component -

i'm trying create hoc component presentational component , having bit of trouble syntax.

let's presentational component called blogviewerbase , let's call hoc component blogviewerhoc. want following:

1. i want include handler functions in hoc component
2. i want hoc component connect redux store, state , pass base component

does code right?

import react, { component, proptypes } 'react'; import { connect } 'react-redux'; import { bindactioncreators } 'redux';  // actions import * myactions '../actions/myactions';  // base component import blowviewerbase '../components/blogviewerbase';  function hocblogviewer(blogviewerbase) {      return class blogviewerhoc extends react.component {         handlerfunction1() {            // logic here        }         handlerfunction2() {            // logic here        }         render() {             return <blogviewerbase {...this.props} />        }     } }  function mapstatetoprops(state) {     return {        var1: state.module.variable1,       var2: state.module.variable2    }; }  function mapdispatchtoprops(dispatch) {      return {         actions: bindactioncreators(myactions, dispatch)     }; }  export default connect(mapstatetoprops, mapdispatchtoprops)(blogviewerhoc(blogviewerbase)); 

where i'm struggling examples of hoc components i've come across more functions , think i'm forming mine more component not sure if i'm connecting store right way. not sure if mappropstostate, mapdispatchtostate , handler functions in right places.

define hoc , pass presentational component it. also, can bind action creator props in mapdispatchtoprops. like:

import react, { component, proptypes } 'react'; import { connect } 'react-redux'; import { myactioncreator } 'yourpathtoyouractions';  // actions import * myactions '../actions/myactions';  // base component import blowviewerbase '../components/blogviewerbase';  function hocblogviewer(wrappedcomponent) {      return class extends react.component {         handlerfunction1() {            // logic here        }         handlerfunction2() {            // logic here        }         componentdidmount() {          // can dispatch action          this.props.myactioninprops();        }         render() {             return <wrappedcomponent {...this.props} />        }     } }  function mapstatetoprops(state) {     return {        var1: state.module.variable1,       var2: state.module.variable2    }; }  function mapdispatchtoprops(dispatch) {      return {         myactioninprops: dispatch(myactioncreator())     }; }  export default connect(mapstatetoprops, mapdispatchtoprops)(hocblogviewer(blowviewerbase));