A web app that allows users to build their custom Burger & Mimic Checkout.
Install my-project with npm
npm install my-project
cd my-projecthttps://burger-a.netlify.app/make-burger
For support, email [email protected] or send a message on Twitter.
-
Created States for the individual ingridients(which was a bit stressful) e.g const [mayoCount, setMayoCount] = useState(2);
-
Created an object containing each ingridient and the current amount the user has added, which is by default = 0. E.g const burger = { mayo: 0, salad: 0, cutlet: 0, };
-
Now, for the best part, i'm using a very Intuitive(i must say) spread syntax technique i discovered to repeat a particular Ingredient based on the current count e.g {[...Array(burger.mayo + mayoCount)].map((index) => { return (img src=IMAGEURL />); })}
How to use ...Array(n) (https://simplernerd.com/jsx-repeat-n-times/)
useState
useEffect
useContext