title: How to fix: Warning: Functions are not valid as a React child
body: <p>I've updated my router to take in a second main route.</p>
  
  <pre><code>import React from 'react';
  import { Router, Route, IndexRoute, browserHistory } from 'react-router';
  
  // Containers &amp; Pages
  // Home
  import HomePage from '/imports/ui/pages/home/HomePage.js';
  
  // Accounts
  import SignUp from '/imports/ui/pages/accounts/SignUp.js';
  import Login from '/imports/ui/pages/accounts/Login.js';
  import ForgotPassword from '/imports/ui/pages/accounts/ForgotPassword.js';
  import ResetPassword from '/imports/ui/pages/accounts/ResetPassword.js';
  import PaymentPage from '/imports/ui/pages/accounts/PaymentPage.js';
  import CouponPaymentPage from '/imports/ui/pages/accounts/CouponPaymentPage.js';
  import AccountPage from '/imports/ui/pages/accounts/AccountPage.js';
  
  // General
  import AppContainer from '/imports/ui/containers/AppContainer.js';
  
  // In App
  import DashboardContainer from '/imports/ui/containers/app/DashboardContainer.js';
  import AllRecipesContainer from '/imports/ui/containers/app/AllRecipesContainer.js';
  
  // Legal
  import PrivacyPage from '/imports/ui/pages/legal/PrivacyPage.js';
  import TermsPage from '/imports/ui/pages/legal/TermsPage.js';
  import DisclaimersPage from '/imports/ui/pages/legal/DisclaimersPage.js';
  
  // Admin
  import AdminContainer from '/imports/ui/containers/AdminContainer.js';
  import UsersAdminContainer from '/imports/ui/containers/UsersAdminContainer.js';
  import RecipeStatsPage from '/imports/ui/pages/admin/RecipeStatsPage.js';
  
  // Routes
  export const renderRoutes = () =&gt; (
    &lt;Router onUpdate={() =&gt; window.scrollTo(0, 0)} history={browserHistory}&gt;
      &lt;Route path="/" component={AppContainer}&gt;
        &lt;IndexRoute name="Home" component={HomePage} /&gt;
        &lt;Route name="Sign Up" path="/signup" component={SignUp} /&gt;
        &lt;Route name="Log In" path="/login" component={Login} /&gt;
        &lt;Route name="Forgot Password" path="/forgotpassword" component={ForgotPassword} /&gt;
        &lt;Route name="Reset Password" path="/reset-password/:token" component={ResetPassword} /&gt;
        &lt;Route name="Coupon Payment Page" path="/coupons/:code" component={CouponPaymentPage} /&gt;
        &lt;Route name="Privacy Page" path="/privacy" component={PrivacyPage} /&gt;
        &lt;Route name="Terms" path="/terms" component={TermsPage} /&gt;
        &lt;Route name="Disclaimers" path="/disclaimers" component={DisclaimersPage} /&gt;
        &lt;Route name="Payment" path="/payment" component={PaymentPage} /&gt;
        &lt;Route name="Dashboard" path="/dashboard" component={DashboardContainer} /&gt;
        &lt;Route name="Browse All Recipes" path="/browseall" component={AllRecipesContainer} /&gt;
        &lt;Route name="Manage Account" path="/account" component={AccountPage} /&gt;
      &lt;/Route&gt;
      &lt;Route path="/manager" component={AdminContainer}&gt;
        &lt;IndexRoute name="manager home" component={UsersAdminContainer} /&gt;
        &lt;Route path="/manager/recipes" component={RecipeStatsPage} /&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;
  );
  </code></pre>
  
  <p>When I navigate to '/manager' in my app I get an error:</p>
  
  <blockquote>
    <p>Warning: Functions are not valid as a React child. This may happen if
    you return a Component instead of  from render. Or maybe
    you meant to call this function rather than return it.
        in Unknown (created by RouterContext)
        in RouterContext (created by Router)
        in Router</p>
  </blockquote>
  
  <p>// AdminContainer.js</p>
  
  <pre><code>import { Meteor } from 'meteor/meteor';
  import { withTracker } from 'meteor/react-meteor-data';
  import Admin from '/imports/ui/layouts/Admin.js';
  
  export default withTracker(() =&gt; {
    const userHandle = Meteor.subscribe('users.myData');
    const loading = !userHandle.ready();
    return {
      user: Meteor.user(),
      loading,
    };
  }, Admin);
  </code></pre>
  
  <p>// UsersAdminContainer.js</p>
  
  <pre><code>import { Meteor } from 'meteor/meteor';
  import { withTracker } from 'meteor/react-meteor-data';
  import UsersAdminPage from '/imports/ui/pages/admin/UsersAdminPage.js';
  
  export default withTracker(() =&gt; {
    const usersHandle = Meteor.subscribe('users.allUsers');
    const loading = !usersHandle.ready();
    return {
      loading,
      users: Meteor.users.find().fetch(),
    };
  }, UsersAdminPage);
  </code></pre>
  
  <p>I've tried importing the UsersAdminPage and using that for the component of the indexroute. I've looked at this answer on SO (<a href="https://stackoverflow.com/questions/48458334/functions-are-not-valid-as-a-react-child-this-may-happen-if-you-return-a-compon">Functions are not valid as a React child. This may happen if you return a Component instead of from render</a>). I'm not seeing my error any help would be much appreciated.</p>
  
  <p>// package.json</p>
  
  <pre><code>{
    "name": "-",
    "version": "0.0.1",
    "private": true,
    "scripts": {
      "start": "meteor --settings dev-settings.json"
    },
    "dependencies": {
      "autoprefixer": "^7.1.1",
      "babel-runtime": "^6.26.0",
      "bcrypt": "^1.0.3",
      "bluebird": "^3.5.1",
      "contentful": "^5.1.3",
      "marked": "^0.3.6",
      "meteor-node-stubs": "~0.2.4",
      "moment": "^2.21.0",
      "prop-types": "^15.6.0",
      "radium": "^0.19.6",
      "react": "^16.1.1",
      "react-async-script-loader": "^0.3.0",
      "react-burger-menu": "^2.1.11",
      "react-document-title": "^2.0.3",
      "react-dom": "^16.1.1",
      "react-feather": "^1.0.7",
      "react-flatpickr": "^3.6.3",
      "react-router": "^3.0.5",
      "react-stripe-elements": "^1.2.1",
      "react-tooltip": "^3.4.0",
      "reactable": "github:vladnicula/reactable",
      "sib-api-v3-sdk": "^3.1.6",
      "simpl-schema": "^0.3.2",
      "stripe": "^5.5.0",
      "sweetalert": "^2.0.8",
      "sweetalert2": "^7.1.2",
      "underscore": "^1.8.3"
    },
    "devDependencies": {
      "@meteorjs/eslint-config-meteor": "^1.0.5",
      "babel-eslint": "^7.2.3",
      "eslint": "^4.4.1",
      "eslint-config-airbnb": "^15.1.0",
      "eslint-import-resolver-meteor": "^0.4.0",
      "eslint-plugin-import": "^2.7.0",
      "eslint-plugin-jsx-a11y": "^5.1.1",
      "eslint-plugin-meteor": "^4.0.1",
      "eslint-plugin-react": "^7.2.1"
    },
    "postcss": {
      "plugins": {
        "postcss-easy-import": {
          "extensions": [
            ".css",
            ".scss",
            ".import.css"
          ]
        },
        "autoprefixer": {
          "browsers": [
            "last 2 versions"
          ]
        }
      }
    },
    "eslintConfig": {
      "parser": "babel-eslint",
      "parserOptions": {
        "allowImportExportEverywhere": true,
        "allowAfterThis": true
      },
      "plugins": [
        "meteor"
      ],
      "extends": [
        "airbnb",
        "plugin:meteor/recommended"
      ],
      "settings": {
        "import/resolver": "meteor"
      },
      "rules": {
        "import/extensions": [
          "off",
          "never"
        ],
        "import/no-extraneous-dependencies": "off",
        "import/prefer-default-export": "off",
        "import/no-absolute-path": "off",
        "react/prefer-stateless-function": "off",
        "react/jsx-filename-extension": "off",
        "react/forbid-prop-types": "off",
        "react/require-default-props": "off",
        "no-underscore-dangle": "off",
        "jsx-a11y/no-static-element-interactions": "off",
        "class-methods-use-this": "off"
      }
    }
  }
  </code></pre>