Tabs Navigation JW

import React, {Component, PropTypes} from 'react'
import MainPage from './MainPage'
import ClubOverview from './ClubOverview'
import {Page, Navigator, Tabbar, Tab} from 'react-onsenui'
require('moment/locale/de')

class Tabs extends Component {

  renderTabs () {
    return (
      [
        {
          content: <MainPage key='MainPage' navigator={this.props.navigator} />,
          tab: <Tab key='Events' label='Events' icon='fa-calendar'/>
        },
        {
          content: <ClubOverview key='ClubOverview' navigator={this.props.navigator}/>,
          tab: <Tab key='Clubs' label='Clubs' icon='fa-glass'/>
        }
      ]
    )
  }

  render () {
    console.log(typeof this.renderTabs())
    return (
      <Page>
        <Tabbar renderTabs={() => this.renderTabs()}/>
      </Page>
    )
  }
}

Tabs.propTypes = {
  navigator: PropTypes.object
}

const App = () => {
  const renderPage = (route, navigator) => {
    route.props = route.props || {}
    route.props.navigator = navigator
    return <route.component key={route.key} {...route.props}/>
  }

  return <Navigator renderPage={renderPage} initialRoute={{component: Tabs, key: 'Tabs'}}/>
}

export default App