Компонент React ломается? Я не могу понять почему

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 <div key = {recipe.id}>{recipe.name}</div>
    }
    componentWillMount(){
        this.getRec();
    }
    getRec(_){
        fetch('http://localhost:5000/recipes')
        .then(response => response.json())
        .then(data => {
            this.setState({recipes: data});
        })
        .catch(err => console.info(err))
    }
    render() {
        const recipes = this.state.recipes;
        const howManyRecipes = recipes.length;
        console.info(recipes.data.length);
        const view = howManyRecipes > 0 ? <Route component = {this.state.recipes.map(this.renderRec)} /> : <Route component = {CreateProposal}/>;
        console.info(view);
        return (
            <div>
                <div>Our community did {howManyRecipes} recipes</div>
                {view}
            </div>     
        );
    }
}

export default Recipes;

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>