PropType Validation for Ingredients

README.md

@@ -17,3 +17,4 @@ NOTE: There can be more additions into the design, over iterations of the Applic
 2. Initiating the implementation of Burger Builder Container: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/d8d3987494ed8a0297a97d1dd3e864e3a6e7bbf4)
 3. Concept Art of the Burger using CSS: **[Code @CodePen](https://codepen.io/ch-sriram/pen/rNeByJy)**
 4. Adding Dynamic Ingredient Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/c0df741dc802e801a1f4118aaea57ba1e893da40)
+5. Adding `PropType` Validation for Ingredients: [Commit Details]()

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",

src/components/Burger/BurgerIngredient/BurgerIngredient.component.jsx

@@ -1,13 +1,23 @@
+// LIBRARY IMPORTS
 import React from 'react';
+import PropTypes from 'prop-types';
+
+// STYLED COMPONENTS
 import { BreadBottom, BreadTop, Salad, Bacon, Meat, Cheese } from './BurgerIngredient.styled';
 
 
 const burgerIngredient = props => {
   let ingredient = null;
 
   switch (props.type) {
-    case 'bread-top':
-      ingredient = <BreadTop className="seeds seeds2" />; break;
+    case 'bread-top': 
+      ingredient = (
+        <BreadTop>
+          <div className="seeds"></div>          
+          <div className="seeds2"></div>          
+        </BreadTop>
+      );
+      break;
     case 'bread-bottom': ingredient = BreadBottom; break;
     case 'bacon': ingredient = Bacon; break;
     case 'salad': ingredient = Salad; break;
@@ -19,4 +29,8 @@ const burgerIngredient = props => {
   return ingredient;
 };
 
+burgerIngredient.propTypes = {
+  type: PropTypes.string.isRequired
+}
+
 export default burgerIngredient;