[Rubix] - Menu item - I can't load menu item dynamically.

header.jsx

import { State, Navigation } from 'react-router';
import docCookies from './cookies';
import classNames from 'classnames';
import Helpers from 'util/Helpers';
import MenuServicos from '../routes/components/MenuServicos';

import { Link } from 'react-router';
import { SidebarBtn } from 'global/jsx/sidebar_component';

class Brand extends React.Component {
  render() {
    return (
      <NavHeader {...this.props}>
        <NavBrand tabIndex='-1'>
          <img src='/imgs/logo.png' alt='Pixma' width='80' height='39' />
        </NavBrand>
      </NavHeader>
    );
  }
}


var DirectNavItem = React.createClass({
  mixins: [State, Navigation],
  render() {
    var active = false;
    var currentLocation = this.context.router.state.location.pathname;

    if(!active && this.props.path) {
      active = this.isActive(this.props.path) && (currentLocation == this.props.path);
    }

    var classes = classNames({
      'pressed': active
    });
    return (
      <NavItem className={classes} {...this.props}>
        <Link to={this.props.path}>
          <Icon bundle={this.props.bundle || 'fontello'} glyph={this.props.glyph} />
        </Link>
      </NavItem>
    );
  }
});

var Skins = React.createClass({
  switchSkin(skin, e) {
    e.preventDefault();
    e.stopPropagation();
    for(var i=0; i < Skins.skins.length; i++) {
      $('html').removeClass(Skins.skins[i]);
    }
    $('html').addClass(skin);
    vex.close(this.props.id);
  },
  
  render() {
    return (
      <Grid style={{margin: '-2em'}}>
        <Row>
          <Col xs={12} className='text-center bg-darkgrayishblue75' style={{marginBottom: 25}}>
            <div className='fg-white' style={{fontSize: 24, lineHeight: 1, padding: '25px 10px'}}>
              Choose a theme:
            </div>
          </Col>
        </Row>
        <Row>
          <Col xs={4} className='text-center'>
            <a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'default')}>
              <Icon glyph='icon-fontello-stop icon-4x' style={{color: '#E76049'}} />
            </a>
          </Col>
          <Col xs={4} className='text-center'>
            <a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'green')}>
              <Icon glyph='icon-fontello-stop icon-4x' className='fg-darkgreen45' />
            </a>
          </Col>
          <Col xs={4} className='text-center'>
            <a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'blue')}>
              <Icon glyph='icon-fontello-stop icon-4x' className='fg-blue' />
            </a>
          </Col>
        </Row>
        <Row>
          <Col xs={4} className='text-center'>
            <a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'purple')}>
              <Icon glyph='icon-fontello-stop icon-4x' className='fg-purple' />
            </a>
          </Col>
          <Col xs={4} className='text-center'>
            <a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'brown')}>
              <Icon glyph='icon-fontello-stop icon-4x' className='fg-brown' />
            </a>
          </Col>
          <Col xs={4} className='text-center'>
            <a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'cyan')}>
              <Icon glyph='icon-fontello-stop icon-4x' className='fg-darkcyan' />
            </a>
          </Col>
        </Row>
      </Grid>
    );
  }
});

Skins.skins = ['default', 'green', 'blue', 'purple', 'brown', 'cyan'];


var HeaderNavigation = React.createClass({
  handleSkinSwitch(e) {
    e.preventDefault();
    e.stopPropagation();
    var vexContent;
    vex.dialog.open({
      afterOpen: ($vexContent) => {
        vexContent = $vexContent;
        return React.render(<Skins id={$vexContent.data().vex.id} />, $vexContent.get(0));
      },
      afterClose: () => {
        React.unmountComponentAtNode(vexContent.get(0));
      }
    });
  },
  getInitialState: function(){
    console.log('header - getInitialState ');       
    return { 
      ose:null,
      oseList:null,
      returnStatus:[],
      qtdServicos: 0
    };
  },
      //retorno de sucesso do Helpers
    success: function (result) {
      //console.log('++++++ OSE carregada !!! ++++' , result.dataObject)
      //console.log('++++++ servicos ose oseList !!! ++++' , result.dataObject.oseList)
      if(this.isMounted()){
          this.setState({
            ose: result.dataObject,
            oseList: result.dataObject.oseList,
            resultStatus: result.resultStatus
          });
        //console.log('++++++ servicos ose oseList !!! ++++' , this.state.ose.oseList.length);
      }
        
    },
    limparTela: function(){

    },
    //retorno de erro do Helpers
    error: function (xhr, textStatus, errorThrown) {
      vex.dialog.alert(xhr.returnStatus.description);
      // só pra teste, apagar depois e deixar o alerta
      Helpers.ShowMessageError(xhr.returnStatus.message);
    },
    componentDidMount: function() {
      
      Helpers.Get('/Cliente//951009/OSE/Situacao/201', this.success, this.error);
    },

  render: function() {
    
    //console.log('this.state.ose' , this.state.ose);
    if(this.state.ose === null || this.state.oseList === null || this.state.oseList[0].length === 0 ){
        //console.log('this.state.ose.oseList.length === 0' , this.state.ose );
        return <div />
    }


    return (
      <NavContent className='pull-right' {...this.props}>
        <Nav className='hidden-xs'>

          <NavItem className='hidden-sm'>
            <a href='#' onClick={this.handleSkinSwitch}>
              <Icon glyph='icon-fontello-circle' className='fg-theme' style={{lineHeight: 1, fontSize: 24 }} />
            </a>
          </NavItem>
           <NavItem dropdown toggleOnHover className='collapse-left'>
              <DropdownButton nav>
                <Icon bundle='fontello' glyph='basket-alt' />
                <Badge className='fg-black bg-red notification-badge'>0</Badge>
              </DropdownButton>
              <MenuServicos  servicosCarrinho={this.state.ose.oseList[0].OSEItens}/>
          </NavItem>           
         </Nav>

        <Nav>
          <NavItem className='logout' href='#' >
            <Icon bundle='fontello' glyph='off-1' />
          </NavItem>
        </Nav>
      </NavContent>
    );
  }
});

export default class Header extends React.Component {
  render() {
    return (
      <Grid id='navbar' {...this.props}>
        <Row>
          <Col xs={12}>
            <NavBar fixedTop id='rubix-nav-header'>
              <Container fluid>
                <Row>
                  <Col xs={3} visible='xs'>
                    <SidebarBtn />
                  </Col>
                  <Col xs={6} sm={4}>
                    <Brand />
                  </Col>
                  <Col xs={3} sm={8}>
                    <HeaderNavigation pressed={this.props.pressed} />
                  </Col>
                </Row>
              </Container>
            </NavBar>
          </Col>
        </Row>
      </Grid>
    );
  }
}

index.html

<!DOCTYPE html>
<html class='default' dir='{dir}'>
  <head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=Edge,chrome=1' />
    <title>Pixma: administração web </title>
    <meta name='author' content='Quasares tecnologia, quasares@quasares.com.br'>
    <meta name='description' content='Pixma administração'>
    <meta name='keywords' content='Pintura, parece, muro, metro, metro quadrado, apartamento, casa'>
    <meta name='robots' content='index, follow'>
    <meta name='viewport' content='width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'>
    <link rel='apple-touch-icon' sizes='57x57' href='/favicons/apple-touch-icon-57x57.png'>
    <link rel='apple-touch-icon' sizes='114x114' href='/favicons/apple-touch-icon-114x114.png'>
    <link rel='apple-touch-icon' sizes='72x72' href='/favicons/apple-touch-icon-72x72.png'>
    <link rel='apple-touch-icon' sizes='144x144' href='/favicons/apple-touch-icon-144x144.png'>
    <link rel='apple-touch-icon' sizes='60x60' href='/favicons/apple-touch-icon-60x60.png'>
    <link rel='apple-touch-icon' sizes='120x120' href='/favicons/apple-touch-icon-120x120.png'>
    <link rel='apple-touch-icon' sizes='76x76' href='/favicons/apple-touch-icon-76x76.png'>
    <link rel='apple-touch-icon' sizes='152x152' href='/favicons/apple-touch-icon-152x152.png'>
    <meta name='apple-mobile-web-app-title' content='Pixma'>
    <link rel='icon' type='image/png' href='/favicons/favicon-196x196.png' sizes='196x196'>
    <link rel='icon' type='image/png' href='/favicons/favicon-160x160.png' sizes='160x160'>
    <link rel='icon' type='image/png' href='/favicons/favicon-96x96.png' sizes='96x96'>
    <link rel='icon' type='image/png' href='/favicons/favicon-16x16.png' sizes='16x16'>
    <link rel='icon' type='image/png' href='/favicons/favicon-32x32.png' sizes='32x32'>
    <meta name='msapplication-TileColor' content='#E76049'>
    <meta name='msapplication-TileImage' content='/mstile-144x144.png'>
    <meta name='application-name' content='Pixma'>
    <link media='screen' rel='stylesheet' type='text/css' href='/css/vendor/pace/pace.css' />
    <link media='screen' rel='stylesheet' type='text/css' href='/css/vendor/perfect-scrollbar/perfect-scrollbar.css'>
    <link media='screen' rel='stylesheet' type='text/css' href='/css/vendor/morris/morris.css'>
    <link media='screen' rel='stylesheet' type='text/css' href='/bower_components/codemirror/lib/codemirror.css'>
    <link media='screen' rel='stylesheet' type='text/css' href='/bower_components/codemirror/theme/ambiance.css'>
    <style>
        .modal-backdrop.in {
            opacity: 0.5;
            position: fixed;
            top: 0; left: 0;
            right: 0; bottom: 0;
        }
    </style>
{stylesheets}    <link media='screen' rel='stylesheet' type='text/css' href='/css/fonts/{app}/fonts.css'>
  </head>
  <body class='fade-out' data-version='{version}'>
    <div id='pace-loader' class='pace-big'></div>
    <div id='app-preloader'></div>
    <div id='app-container'>{container}</div>
    <div id='blueimp-gallery' class='blueimp-gallery blueimp-gallery-controls'>
      <div class='slides'></div>
      <h3 class='title'></h3>
      <p class="description"></p>
      <a class='prev'>‹</a>
      <a class='next'>›</a>
      <a class='close'>×</a>
      <a class='play-pause'></a>
      <ol class='indicator'></ol>
    </div>
    <script type='text/javascript' src='/js/common/pace/pace.js'></script>
    <script type='text/javascript' src='/js/common/uuid/uuid.js'></script>
    
    <!--incluido após versão 3.2-->
    <script type='text/javascript' src='/bower_components/react/react-dom.js'></script>

    <script type='text/javascript' src='/bower_components/modernizr/modernizr.js'></script>
    <script type='text/javascript' src='/bower_components/codemirror/lib/codemirror.js'></script>
    <script type='text/javascript' src='/bower_components/codemirror/mode/javascript/javascript.js'></script>
    <script type='text/javascript' src='/bower_components/jquery/dist/jquery.js'></script>
    <script type='text/javascript' src='/bower_components/jquery-ui/jquery-ui.min.js'></script>
    <script type='text/javascript' src='/bower_components/moment/moment.js'></script>
    <script type='text/javascript' src='/bower_components/eventemitter2/lib/eventemitter2.js'></script>
    <script type='text/javascript' src='/bower_components/vex/js/vex.combined.min.js'></script>
    <script type='text/javascript' src='/bower_components/chartjs/Chart.js'></script>
    <script type='text/javascript' src='/bower_components/trumbowyg/dist/trumbowyg.js'></script>
    <script type='text/javascript' src='/bower_components/blueimp-gallery/js/blueimp-gallery.js'></script>
    <script type='text/javascript' src='/js/vendor/p-scrollbar/min/perfect-scrollbar.min.js'></script>
    <script type='text/javascript' src='/bower_components/react/react-with-addons.js'></script>
    <script type='text/javascript' src='/js/vendor/datatables/datatables.js'></script>
    <script type='text/javascript' src='/js/common/react-l20n/react-l20n.js'></script>
    <script type='text/javascript' src='/js/common/rubix-bootstrap/rubix-bootstrap.js'></script>

    <!--<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true"></script>
    <script type='text/javascript' src='/js/vendor/gmaps/gmaps.js'></script>
    -->
    <script type='text/javascript' src='/js/vendor/bootstrap/bootstrap.js'></script>
    <script type='text/javascript' src='/js/vendor/bootstrap-slider/bootstrap-slider.js'></script>
    <script type='text/javascript' src='/js/vendor/bootstrap-datetimepicker/bootstrap-datetimepicker.js'></script>

    <!--<script type='text/javascript' src='/js/vendor/bootstrap-datetimepicker/bootstrap-datetimepicker.pt-BR.js'></script>-->

    <script type='text/javascript' src='/js/vendor/ion.tabs/ion.tabs.min.js'></script>
    <script type='text/javascript' src='/js/vendor/ion.rangeSlider/ion.rangeSlider.min.js'></script>
    <script type='text/javascript' src='/js/vendor/d3/d3.js'></script>
    <script type='text/javascript' src='/js/vendor/jquery.knob/jquery.knob.js'></script>
    <script type='text/javascript' src='/js/vendor/leaflet/leaflet.js'></script>
    <script type='text/javascript' src='/js/vendor/sparklines/sparklines.js'></script>
    <script type='text/javascript' src='/js/vendor/switchery/switchery.js'></script>
    <script type='text/javascript' src='/js/vendor/raphael/raphael.js'></script>
    <script type='text/javascript' src='/js/vendor/messenger/messenger.min.js'></script>
    <script type='text/javascript' src='/js/vendor/select2/select2.js'></script>
    <script type='text/javascript' src='/js/vendor/xeditable/xeditable.js'></script>
    <script type='text/javascript' src='/js/vendor/typeahead/typeahead.js'></script>
    <script type='text/javascript' src='/js/vendor/jquery-steps/jquery-steps.js'></script>
    <script type='text/javascript' src='/js/vendor/jquery-validate/jquery-validate.js'></script>

    <script type='text/javascript' src='/js/vendor/jquery-maskedinput/jquery.maskedinput.min.js'></script>
    
    <script type='text/javascript' src='/js/vendor/tablesaw/tablesaw.js'></script>
    <script type='text/javascript' src='/js/vendor/fullcalendar/fullcalendar.js'></script>
    <script type='text/javascript' src='/js/vendor/nestable/nestable.js'></script>
    <script type='text/javascript' src='/js/vendor/dropzone/dropzone.js'></script>
    <script type='text/javascript' src='/js/vendor/jcrop/color.js'></script>
    <script type='text/javascript' src='/js/vendor/jcrop/jcrop.js'></script>
    <script type='text/javascript' src='/js/vendor/prism/prism.js'></script>
    <script type='text/javascript' src='/js/vendor/morris/morris.js'></script>
    <script type='text/javascript' src='/js/vendor/timeline/timeline.js'></script>
    <script type='text/javascript' src='/js/vendor/holder/holder.js'></script>
    <script type='text/javascript' src='/bower_components/c3/c3.js'></script>
    <script type='text/javascript' src='/js/common/rubix/rubix.js'></script>
    <script type='text/javascript' src='/js/common/globals.js'></script>
    <script type='text/javascript' src='{appscript}'></script>
  </body>
</html>

MenuServicos.jsx

var ReactIntl       = require('react-intl');
var IntlMixin       = ReactIntl.IntlMixin;
var FormattedNumber = ReactIntl.FormattedNumber; 

var MenuServicos = React.createClass({
	mixins: [IntlMixin],
	

    render: function() {
    var menu = (
				  <Menu  alignRight id='rss-menu' className='double-width' alwaysInactive>
				    <MenuItem header>Header</MenuItem>
				    {
				      this.props.servicosCarrinho.map(function(ose, index){
				        return (
						<MenuItem key={index} href='#'>
					                  <Grid>
					                    <Row>
					                      <Col xs={2}>
					                        <Icon className='fg-text' bundle='fontello' glyph='star' />
					                      </Col>
					                      <Col xs={10} collapseLeft className='notification-container' style={{width: 265}}>
					                        <div className='time'>
					                          <strong className='fg-darkgray50'><em>Nome do serviço </em></strong>
					                        </div>
					                        <div className='message-header fg-darkgray50'>
					                          <strong className='fg-darkgreen45'>{ose.area}</strong><strong> m²</strong><strong className='fg-darkblue'>será realizado em {ose.qtdDiarias}</strong>
					                        </div>
					                        <div className='message-details fg-text'>
					                          Valor total: <FormattedNumber value={ose.valorTotal} style="currency" currency="BRL" locales='pt-BR' /> 
					                        </div>
					                      </Col>
					                    </Row>
					                  </Grid>
			                </MenuItem>
				        );
				      })
				    }
				  </Menu>
				);

		return (<div>{menu} </div>);
    }
});
module.exports = MenuServicos;

Warning: Only functions or strings can be mounted as React components.
react-with-addons.js:9729 Uncaught TypeError: Cannot read property 'toUpperCase' of undefined