- BrowserHistory undefined

src/components/menus/MenuDetail.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const MenuDetail = ({match}) => (
+    <div>
+        <h3>Menu Id: {match.params.id}</h3>
+    </div>
+);
+
+export default MenuDetail;

src/components/menus/SpicyMenu.js

@@ -1,6 +1,7 @@
 import React from "react";
 import {Avatar, List, ListItem} from 'material-ui';
 import {Grid, Row, Col} from 'react-flexbox-grid';
+import { browserHistory } from 'react-router';
 
 import foodItems from '../../data/food.js';
 
@@ -20,7 +21,7 @@ class SpicyMenu extends React.Component {
     render() {
         return (
             <List>
-                {this.state.foodItems.map(foodItem => <SpicyMenuItem key={foodItem.name} {...foodItem}/>)}
+                {this.state.foodItems.map(foodItem => <SpicyMenuItem key={foodItem.id} {...foodItem}/>)}
             </List>
 
         );
@@ -31,16 +32,33 @@ const RowItemStyle = {
     alignItems: "center"
 };
 
-const SpicyMenuItem = (props) => (
-    <ListItem>
-        <Grid fluid>
-            <Row center="lg" style={RowItemStyle}>
-                <Col xs={3} sm={3} lg={2}><Avatar src={props.image}/></Col>
-                <Col xs={6} sm={6} lg={4}>{props.name}</Col>
-                <Col xs={3} sm={3} lg={2}>{props.price}</Col>
-            </Row>
-        </Grid>
-    </ListItem>
-);
+class SpicyMenuItem extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.fetchMenuItem = this.fetchMenuItem.bind(this);
+    }
+
+    fetchMenuItem(menuId) {
+        return () => {
+            console.log("fetching menu with id: " + menuId);
+            browserHistory.push('/menuDetail/' + menuId);
+        }
+
+    }
+    render() {
+        return (
+            <ListItem onClick={this.fetchMenuItem(this.props.id)}>
+                <Grid fluid>
+                    <Row center="lg" style={RowItemStyle}>
+                        <Col xs={3} sm={3} lg={2}><Avatar src={this.props.image}/></Col>
+                        <Col xs={6} sm={6} lg={4}>{this.props.name}</Col>
+                        <Col xs={3} sm={3} lg={2}>{this.props.price}</Col>
+                    </Row>
+                </Grid>
+            </ListItem>
+        );
+    }
+}
 
 export default SpicyMenu;

src/data/food.js

@@ -13,62 +13,74 @@ import pizza from "../images/vegetables-italian-pizza-restaurant.jpg";
 
 const foodItems = [
     {
+        "id": "1",
         "name": "Bread Sandwich",
         "image": breadSandwich,
         "price": "$9.89"
 
     },
     {
+        "id": "2",
         "name": "Spaghetti Pasta",
         "image": spaghettiPasta,
         "price": "$11.23"
     },
     {
+        "id": "3",
         "name": "Healthy Salad",
         "image": healthySalad,
         "price": "$12.99"
     },
     {
+        "id": "4",
         "name": "Meat Mushroom",
         "image": meatMushroom,
         "price": "$7.99"
     },
     {
+        "id": "5",
         "name": "Muffin",
         "image": muffin,
         "price": "$3.99"
     },
     {
+        "id": "6",
         "name": "Tom Yum Soup",
         "image": tomYumSoup,
         "price": "$5.55"
     },
     {
+        "id": "7",
         "name": "Burger Fries",
         "image": burgerFries,
         "price": "$11.10"
     },
     {
+        "id": "8",
         "name": "Stir Fry",
         "image": stirFry,
         "price": "$7.45"
     },
     {
+        "id": "9",
         "name": "Spinach Salad",
         "image": spinachSalad,
         "price": "$6.55"
     },
     {
+        "id": "10",
         "name": "Kale Salad",
         "image": kaleSalad,
         "price": "$6.55"
     },
     {
+        "id": "11",
         "name": "Salmon Cake",
         "image": salmonCake,
         "price": "$6.10"
     },
     {
+        "id": "12",
         "name": "Italian Pizza",
         "image": pizza,
         "price": "$11.99"

src/index.js

@@ -7,6 +7,7 @@ import injectTapEventPlugin from "react-tap-event-plugin";
 import App from "./App";
 import Summary from "./components/summary/Summary";
 import Menu from "./components/menus/SpicyMenu";
+import MenuDetail from "./components/menus/MenuDetail";
 
 import {BrowserRouter as Router, browserHistory, Route, Redirect} from "react-router-dom";
 
@@ -20,7 +21,8 @@ const Root = () => (
                 <Route path="/" component={App}/>
                 <Route path="/menu" component={Menu}/>
                 <Route path="/summary" component={Summary}/>
-                <Redirect from="/" to="/summary" />
+                <Route path="/menuDetail/:id" component={MenuDetail}/>
+                <Redirect from="/" to="/summary"/>
             </div>
         </Router>
     </MuiThemeProvider>