Phase 2 Making Pizza and Components

So for my second Project for Flatiron I decided to work on something personnel again. I thought it would be a great idea to build something for my parent’s, who so happen to own a Pizzeria. So for starters, I think the most challenging part was planning on the architecture of the project. The best way I addressed this issue I jotted down a visual example on how I would consider approaching the layout of my project. However, Understanding terms such as, Parent Components Child Components and Sibling Components helped me a lot for React.

As I mentioned earlier planning on the architectural section of my project was difficult, luckily React has a hierarchy of order that helps such as the Parent Component. The Parent Component is a function thats takes in props as arguments and returns JSX. Props are arguments used in React and are essential for sending data between the Parent Component and the Child Component. To visualize how the structure is set up take this gif of a tree as an example, the parent component is the foundation or trunk of the tree and the children are the leaves that branch out.

https://gfycat.com/coolelderlybedbug

Now for the Leaves. The Child Component is a function that lets you pass a render function to a component as the Children props . In other words, within the parent component you create a callback function and pass the callback function as a prop to the child component. The child component calls the parent callback function through props and passes the data to the parent component. For Example, handling function handleSubmit exists within a component, ItemForm. The function handleSubmit is the callback function that is in charge of the logic, meaning when a new item is submitted, handleSubmit will POST the new item on to the database.

function handleSubmit(e){
e.preventDefault()
const itemInfo ={
name: name,
description: description,
price: price,
category: category,
}
fetch("http://localhost:3000/Pizza",{
method: "POST",
headers: {
"Content-Type": "application/json",
'Accept': 'application/json'
},
body: JSON.stringify(itemInfo)
})
.then((r)=> r.json())
.then((newItem)=> onAddItem(newItem))

because of refactoring, the function handleSubmit is passed down as a prop to the Child Component Form. Now the child component Form takes the function handleSubmit as a prop and passes it by reference to the form element. So take this code as an example,

function Form({
handleSubmit,
name,
description,
price,
category,
setName,
setDescription,
setPrice,
setCategory
}){
return (
<form   className="NewItem" onSubmit={handleSubmit}>.... etc 
</form>

When the “Add to menu” button is clicked, the event handler onSubmit references back to the function handleSubmit within the Parent Component and update the state of the menu, by adding our new item.

I’ll be the first to admit that React was quite the challenge, as there was a lot of information to take in however, react simplifies breaking down components from parent to child, which helps to understand how information are passed through the component tree. At the end due to short time, I was able to create a small menu that allowed the client to add new items to the menu and add any item to their shopping cart. As well as remove items from their cart.