Mediator Pattern in React

HTML

<script src="http://fb.me/JSXTransformer-0.13.0.js"></script>
<script src="http://fb.me/react-with-addons-0.13.0.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="header">
</div>
<br style="clear:both;margin:10px"/>
<hr/>
<div>
    <h4>Menu List</h4>
    <div id="content"></div>
</div>
<hr/>
<div id="pager"></div>

CSS

#header {
    width: 80%;    
}
#header .menu{
    padding: 5px;
    border: 1px solid silver;
    border-radius: 3px;
    width: 150px;
    float: left;
}

.menu.active{
    background-color: seagreen;
    color: white;
}

#content{
    height: 80px;
}

JavaScript 1.7

//Application State
var MENU = {
    Pasta: 0,
    Salada: 1,
    Sandwich: 2
}

//Mediator
var Mediator = (function(){
    function Mediator(){
        this.reactors = [];
    };
    Mediator.prototype.setReactors = function(reactors){
        this.reactors = reactors;
    }
    Mediator.prototype.send = function(menu, reactor){
        this.reactors.forEach(function(r){
            r.setProps({menu: menu});
        });
    };
    return Mediator;
})();

//Header
var Header = React.createClass({
    handleClick: function(event) {
        var selected = event.target.getAttribute("data-value");
        this.props.mediator.send(selected);
    },
    render: function() {
        var self = this;
        var selected = this.props.menu;
        var menus = Object.keys(MENU).map(function(m){
            return {name:m, value:MENU[m], className: (MENU[m] == selected ? "menu active" : "menu")}
        });
        var nodes = menus.map(function(m){
            return <div data-value={m.value} className={m.className} onClick={self.handleClick}>{m.name}</div>;
        });
        return <div>{nodes}</div>;
    }
});

//Content
var Content = React.createClass({
    render: function() {
        var list = [];
        if(this.props.menu == MENU.Pasta){
            list = ["Carbonara", "Peperoncino", "Mentaiko"]
        }else{
            list = ["Green Salada", "Caesar salad"]
        }
        return <ul>{list.map(function(e, i){ return <li key={i}>{e}</li>; })}</ul>;
    }
});

//Pager
var Pager = React.createClass({
    handleClick: function(event) {
        var next = (this.props.menu == MENU.Pasta ? MENU.Salada : MENU.Pasta);
        this.props.mediator.send(next);
    },
    render: function() {
        var arrow = (this.props.menu == MENU.Pasta ? ">>" : "<<");
        return <button onClick={this.handleClick}>{arrow}</button>;
    }
})


var mediator = new Mediator();
var initMenu = MENU.Pasta;
var header = React.render(<Header menu={initMenu} mediator={mediator}/>,...