Simplify RenderFoods use

fuzue · Jul 15, 2023 · a92c24f · a92c24f
1 parent 40b47ca
commit a92c24f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/components/RenderFoods.tsx b/src/components/RenderFoods.tsx
@@ -1,7 +1,7 @@
-
 import type { FoodList } from "../types/food";
 import Item from "./Item";
 import { Grid, styled } from "@mui/material";
+import { FunctionComponent } from "react"
 
 const StyledGrid = styled(Grid)(() => ({
   display: "flex",
@@ -10,8 +10,13 @@ const StyledGrid = styled(Grid)(() => ({
   margin: "0.25em",
 }));
 
+interface RenderFoodProps {
+  foodList: FoodList
+}
+
 //render the grid of foods
-function RenderFoods(foodList: FoodList) {
+const RenderFoods:FunctionComponent<RenderFoodProps> = (props:RenderFoodProps) => {
+  const foodList = props.foodList
   const foodItems = foodList.map((item, key) => {
     return (
       <Grid item xs={4} key={key}>

diff --git a/src/routes/FoodOfTheMonth.tsx b/src/routes/FoodOfTheMonth.tsx
@@ -33,10 +33,6 @@ export default function FoodOfTheMonth() {
   const fruitsList = filterFoodType(monthFood, "Fruits");
   const veggiesList = filterFoodType(monthFood, "Veggies");
 
-  //renders the fruits, veggies and others
-  const RenderFruits = () => RenderFoods(fruitsList);
-  const RenderVeggies = () => RenderFoods(veggiesList);
-
   //variables to handle the changing tabs
   const [foodType, setFoodType] = useState("Fruits" as FoodCategory);
   // @ts-ignore
@@ -48,9 +44,9 @@ export default function FoodOfTheMonth() {
   const changeTab = (foodType: FoodCategory) => {
     switch (foodType) {
       case "Fruits":
-        return <RenderFruits />;
+        return <RenderFoods foodList={fruitsList}/>;
       case "Veggies":
-        return <RenderVeggies />;
+        return <RenderFoods foodList={veggiesList}/>;
     }
   };