Prop n Prop

Jafet Reyes Jr.
2 min readOct 5, 2022

--

From an understanding I manage to understand the concept of passing functions, or even variables from file to file across the “coding tree”. This was difficult to learn because, during the time we learned the new concept I was sick and not even able to be on a computer screen. After watching some videos it took me almost a week to learn the concept; it was the most simplest concept. After learning it, it came to be as simple.

Carefully reviewing this snipped of code placed above you, you can see the function ‘handleAddPlant’ as a regular vanilla JS function. We are not invoking it in this file. In return value we see “NewPlantForm” that is a different JS file that is is the same coding tree. We are passing this function over to NewPlantForm, in the name ‘addOn’; via prop.

Now look at the start of this function, as you can see the name of the function is the same of the file we passed “addOn” too. This is correct after you passed the prop to the new file, you have to surround the “parameter” with curly brackets to let React know its a prop rather a regular parameter. This will let you be able to use the function “handleAddPlants” in a new file other than the original file which it was created on. In this set we used it as as stated “addOn” for the POST method for this fetch . We placed that every newPlant that is cerated in the submit form it will create it in the db.json file, “addOn” will then take that sumbit form and the will place it along the set of array with the other ones as stated in the code.

Whats good about props is that you can send the whichever function/variable along files without a limit, and even sending the same prop to multiple files as well.

--

--