Presentational and Container Components

Author: sunzid02

confusion/src/components/MainComponent.js

@@ -19,6 +19,7 @@ class Main extends Component {
     }
 
     onDishSelect(dishId) {
+        // alert(dishId);
         this.setState({
             selectedDish: dishId
         });
@@ -37,7 +38,7 @@ class Main extends Component {
                 </Navbar>
 
                 <Menu dishes={this.state.dishes}
-                    onClick={(dishId) => this.onDishSelect(dishId) } />
+                    onClickP={ (dishId) => this.onDishSelect(dishId) } />
 
                 <DishDetail dish={ this.state.dishes.filter( (dish)=>  dish.id === this.state.selectedDish )[0] } />
 

confusion/src/components/MenuComponent.js

@@ -20,7 +20,7 @@ class Menu extends Component{
         const menu = this.props.dishes.map((dish) => {
             return (
                 <div key={ dish.id } className="col-12 col-md-5 m-1">    
-                    <Card onClick={ ()=> this.props.onClick(dish.id) }>
+                    <Card onClick={() => this.props.onClickP(dish.id) }>
                         <CardImg width="100%" src={ dish.image } alt={ dish.name } />
                         <CardImgOverlay>
                             <CardTitle> { dish.name }</CardTitle>