title: React component breaks? I cannot figure out why
body: <p>My component gets array of objects from server and sets it in <code>this.state</code> object.
  But at rendering moment (<code>this.state</code> is updated with <code>this.setState()</code> due to fetch method at the moment <code>componentWillMount(){}</code>) I cannot get normally operate with inside-state array. Why? It outputs me that array is undefined inside <code>render(){}</code> function, and I cannot get <code>recipes.length</code> of array also.</p>
  
  <p>There is a code of Component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from "react";
  import { Router, Route, Link, Switch} from 'react-router';
  import '../css/Recipes.css';
  import EditRecipe from '../js/EditRecipe';
  import DeleteRecipe from '../js/DeleteRecipe';
  import CreateProposal from '../js/CreateProposal';
  import CreateRecipe from "./CreateRecipe";
  
  class Recipes extends React.Component{
      constructor(props){
          super(props);
          this.state = {
              recipes: [] 
          };
          this.renderRec = this.renderRec.bind(this);
          this.getRec = this.getRec.bind(this);
      }
      renderRec(recipe){
          return &lt;div key={recipe.id}&gt;{recipe.name}&lt;/div&gt;
      }
      componentWillMount(){
          this.getRec();
      }
      getRec(_){
          fetch('http://localhost:5000/recipes')
          .then(response =&gt; response.json())
          .then(data =&gt; {
              this.setState({recipes: data});
          })
          .catch(err =&gt; console.log(err))
      }
      render() {
          const recipes = this.state.recipes;
          const howManyRecipes = recipes.length;
          console.log(recipes.data.length);
          const view = howManyRecipes &gt; 0 ? &lt;Route component={this.state.recipes.map(this.renderRec)} /&gt; : &lt;Route component={CreateProposal}/&gt;;
          console.log(view);
          return (
              &lt;div&gt;
                  &lt;div&gt;Our community did {howManyRecipes} recipes&lt;/div&gt;
                  {view}
              &lt;/div&gt;     
          );
      }
  }
  
  export default Recipes;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>