From ffeb447dc136e030c26f6ce1d7d7dc4628c135f4 Mon Sep 17 00:00:00 2001
From: oscarzhou <oscarzhou0727@icloud.com>
Date: Wed, 9 Dec 2020 20:28:59 +1300
Subject: [PATCH] component: apply PropType plugin to props

---
 .../BurgerIngredient/BurgerIngredient.js      | 71 ++++++++++---------
 1 file changed, 39 insertions(+), 32 deletions(-)

diff --git a/src/components/Burger/BurgerIngredient/BurgerIngredient.js b/src/components/Burger/BurgerIngredient/BurgerIngredient.js
index 8dfa7ba..0c3cb6a 100644
--- a/src/components/Burger/BurgerIngredient/BurgerIngredient.js
+++ b/src/components/Burger/BurgerIngredient/BurgerIngredient.js
@@ -1,39 +1,46 @@
-import React from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
 import classes from './burgerIngredient.css';
 
-const burgerIngredient = (props) => {
-    let ingredient = null;
+class BurgerIngredient extends Component {
+    render() {
+        let ingredient = null;
 
-    switch (props.type) {
-        case ('bread-bottom'):
-            ingredient = <div className={classes.BreadBottom}></div>
-            break;
-        case ('bread-top'):
-            ingredient = (
-                <div className={classes.BreadTop}>
-                    <div className={classes.Seeds1}></div>
-                    <div className={classes.Seeds2}></div>
-                </div>
-            )
-            break;
-        case ('meat'):
-            ingredient = <div className={classes.Meat}></div>
-            break;
-        case ('cheese'):
-            ingredient = <div className={classes.Cheese}></div>
-            break;
-        case ('salad'):
-            ingredient = <div className={classes.Salad}></div>
-            break;
-        case ('bacon'):
-            ingredient = <div className={classes.Bacon}></div>
-            break;
-        default:
-            ingredient = null;
-            break;
+        switch (this.props.type) {
+            case ('bread-bottom'):
+                ingredient = <div className={classes.BreadBottom}></div>
+                break;
+            case ('bread-top'):
+                ingredient = (
+                    <div className={classes.BreadTop}>
+                        <div className={classes.Seeds1}></div>
+                        <div className={classes.Seeds2}></div>
+                    </div>
+                )
+                break;
+            case ('meat'):
+                ingredient = <div className={classes.Meat}></div>
+                break;
+            case ('cheese'):
+                ingredient = <div className={classes.Cheese}></div>
+                break;
+            case ('salad'):
+                ingredient = <div className={classes.Salad}></div>
+                break;
+            case ('bacon'):
+                ingredient = <div className={classes.Bacon}></div>
+                break;
+            default:
+                ingredient = null;
+                break;
+        }
+        return ingredient;
     }
-
-    return ingredient;
 }
 
+BurgerIngredient.PropTypes = {
+    type: PropTypes.string.isRequired
+};
+
 export default burgerIngredient;
\ No newline at end of file