Separating presentational and logic components rea

Question

I'm trying to clean up my components so that my container handles logic and my components are presentational only. I'm using Redux to connect my store to container/components.

I'm trying this simple code, and I'm not sure why it is not working and what I'm missing.

Previously I had, and it worked:

var Main = React.createClass({
    render: function(){
       var style = this.props.hover;
       var actions = this.props.actions;
       return (
           <div>
              <Bullet style={style} actions = {actions}/>
           </div>
       );
    }
});

function mapStateToProps(state) {
   return {
      hover: state.hover
   }
}

function mapDispatchToProps(dispatch) {
  return {
     actions: Redux.bindActionCreators(actions, dispatch)
  }
}

var MainConnected = connect(mapStateToProps, mapDispatchToProps)    (Main);


module.exports = MainConnected;

And here was my Bullet component:

var Bullet = React.createClass({
   over: function(){
      this.props.actions.ON();
   },
   out: function(){
      this.props.actions.OFF();
   },
   render: function(){
      var style = this.props.style;
      return(
         <div id="bullet" style = {style} onMouseOver = {this.over} onMouseOut = {this.out}></div>
      );
   }
   });

Now, I tried this:

var Main = React.createClass({
    over: function(){
        console.log('hey');
    },
    out: function(){
        this.props.dispatch(actions.OFF()); 
    },
    render: function(){
        var style = this.props.hover;
        return (
            <div>
                <Bullet id="Git" style={style} onMouseOver = {this.over} onMouseOut = {this.out}/>
            </div>
        );
    }
});

//and Bullet component

var Bullet = React.createClass({
    render: function(){
        var style = this.props.style;
        return(
            <div id="bullet" style = {style} ></div>
        );
    }
});

I removed the over and out logic from the Button but they're not working when called from the Main container. I think I'm misunderstanding how to use this too because the console.log() is not being called.

Thanks for pointing me in the right direction as to how to separate this logic and maybe helping understand how this is used in React. Thanks!

Answer 1

oh, got it. This helped: ReactJS: onClick handler not firing when placed on a child component

I had to pass my functions from Parent to Child. So the code looks like this:

var Main = React.createClass({
    over: function(){
        this.props.dispatch(actions.ON());  
    },
    out: function(){
        this.props.dispatch(actions.OFF()); 
    },
    render: function(){
    var style = this.props.hover;
        return (
            <div>
                <Bullet id="Git" style={style} over = {this.over} out = {this.out}/>
            </div>
        );
   }
});

var Bullet = React.createClass({
    render: function(){
        var style = this.props.style;
        var over = this.props.over;
        var out = this.props.out;
        return(
            <div id="bullet" style = {style} onMouseOver = {over} onMouseOut = {out}></div>
        );
    }
});