diff --git a/donutshop_ecommerce/src/components/layout/MenuItemForm.js b/donutshop_ecommerce/src/components/layout/MenuItemForm.js index f5432c3..aad86b0 100644 --- a/donutshop_ecommerce/src/components/layout/MenuItemForm.js +++ b/donutshop_ecommerce/src/components/layout/MenuItemForm.js @@ -1,16 +1,19 @@ import React, { useState } from 'react' import EditImage from './EditImage'; +import MenuItemProps from './MenuItemProps' + const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => { const [menuImg, setMenuImg] = useState(menuItem?.menuImg || ''); const [itemName, setItemName] = useState(menuItem?.itemName || ''); const [description, setDescription] = useState(menuItem?.description || ''); const [basePrice, setBasePrice] = useState(menuItem?.basePrice || ''); - + const [sizes, setSizes] = useState([]); + return ( -
) diff --git a/donutshop_ecommerce/src/components/layout/MenuItemProps.js b/donutshop_ecommerce/src/components/layout/MenuItemProps.js new file mode 100644 index 0000000..a811036 --- /dev/null +++ b/donutshop_ecommerce/src/components/layout/MenuItemProps.js @@ -0,0 +1,51 @@ +import React from 'react' +import { IoTrashOutline } from "react-icons/io5"; + +const MenuItemProps = ({props, setProps}) => { + + function addProp(){ + setProps(oldProp => { + return [...oldProp, {itemName:'', price:0}]; + }) + } + + function editProp(ev, index, prop){ + const newValue = ev.target.value; + setProps(prevSizes => { + const newSizes = [...prevSizes]; + newSizes[index][prop] = newValue; + return newSizes + }) + } + + function removeProp(indexRemove){ + setProps(prev => prev.filter((v, index) => index !== indexRemove)) + } + + + return ( +