Separating Presentational And Logic Components React/redux

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

Solution 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:

varMain = 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><Bulletid="Git"style={style}over = {this.over}out = {this.out}/></div>
        );
   }
});

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