uicontainer.jsx

var Child = React.createClass({
  render: function() {
    if(this.props.isHighlighted) {
      return <h1>{this.props.name}</h1>;
    } else {
      return <span>{this.props.name}</span>;
    }
  }
});
 
var ListView = React.createClass({
  render: function() {
    return <div>{this.props.children}</div>;
  }
});
 
function AddMouseHighlight(components, highlight) {
  return components.map(function(component, index) {
    return (
      <div onMouseEnter={highlight.bind(index)} 
           onMouseLeave={highlight.bind(null)}>
        {child}
      </div>);
  });
}


TopLevel.add(new Component(), ["modderState", "aap"], [1,2,3]);


var TopLevel = function() {
  var state = {
    spawnpointState: {
      inputCursor: {mouse: 1, keyboard: 2},
      spawnpoints: [{pos: [1,2,3], rot: }, ...]
    }
    modderState: {aap: [1,2,3]}
  }
  
  return {
    render: function() {
      
    }
  }
}

var CursorManager = function(updateState, currentState) {
  moveMouseCursor: function(itemIndex) {
    updateState({mouseCursor: itemIndex});
  },
  moveKeyboardCursor: function(itemIndex) {
    updateState({keyboardCursor: itemIndex});
  }
  render: function() {
    
  }
}
 
<ListView>
  {[<Child name="Aap"/>, <Child name="Beer"/>, <Child name="Leeuw"/>]
    .AddMouseHighlight(this.props.highlight)
    .map(function(child, index) {
      return transferPropsTo(m, {isHighlighted: index == this.props.highlightedItem})
    })}
</ListView>