Functional Components

Author: sunzid02

confusion/src/components/DishdetailComponent.js

@@ -1,22 +1,7 @@
-import React, { Component } from "react";
+import React from "react";
 import { Card, CardImg, CardText, CardBody, CardTitle } from "reactstrap";
 
-class DishDetail extends Component{
-    constructor(props) {
-        super(props);
-
-        console.log(props);
-        
-        // stores iproperties of this component
-        this.state = {
-            selectedDishDetail: this.props.dsdetail
-        };
-
-
-    }
-
-    renderDish(dish) {
-
+    function RenderDish({dish}) {
         if (dish != null) {
             return (
                 <div className='col-12 col-md-5 m-1'>
@@ -37,7 +22,7 @@ class DishDetail extends Component{
         }
     }
 
-    renderComments(comments){
+    function RenderComments({comments}){
         if (comments == null) {
             return (<div></div>)
         }
@@ -68,26 +53,26 @@ class DishDetail extends Component{
     }
 
 
-    render(){
-        const dish = this.props.dish
-
+    const DishDetail = (props) => {
 
+        const dish = props.dish
+        
 
         if (dish == null) {
             return (<div></div>);
         }
 
-        const dishItem = this.renderDish(dish);
-        const dishComment = this.renderComments(dish.comments);
+
+
 
         return (
             <div className='row'>
-                {dishItem}
-                {dishComment}
+                <RenderDish dish={ props.dish } />
+                <RenderComments comments={ props.dish.comments } />
             </div>
         )
     }
 
-}
+
 
 export default DishDetail;

confusion/src/components/MainComponent.js

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

confusion/src/components/MenuComponent.js

@@ -1,31 +1,25 @@
-import React, { Component } from "react";
+import React from "react";
 import { Card, CardImg, CardImgOverlay,  CardTitle  } from "reactstrap";
 
-class Menu extends Component{
+     
 
-    constructor(props){
-        super(props);
-
-
-
-        console.log('Menu component constructed');
-        
+    function RenderMenuItem({ dish, onClick }) {
+        return(
+            <Card onClick={() => onClick(dish.id)}>
+                <CardImg width="100%" src={dish.image} alt={dish.name} />
+                <CardImgOverlay>
+                    <CardTitle> {dish.name}</CardTitle>
+                </CardImgOverlay>
+            </Card>   
+        );
     }
 
+    const Menu = (props) => {
 
-
-    render(){
-        console.log('renders menu component');
-        
-        const menu = this.props.dishes.map((dish) => {
+        const menu = props.dishes.map((dish) => {
             return (
                 <div key={ dish.id } className="col-12 col-md-5 m-1">    
-                    <Card onClick={() => this.props.onClickP(dish.id) }>
-                        <CardImg width="100%" src={ dish.image } alt={ dish.name } />
-                        <CardImgOverlay>
-                            <CardTitle> { dish.name }</CardTitle>
-                        </CardImgOverlay>
-                    </Card>                
+                    <RenderMenuItem dish={dish} onClick={props.onClick} />
                 </div>
             );
         });
@@ -37,12 +31,11 @@ class Menu extends Component{
                 </div>
             </div>
         );
-    }
 
-    componentDidMount(){
-        console.log('Menu component componentDidMounbt is invoked');
-        
     }
-}
+    
+
+
+
 
 export default Menu;