Props-aganda
If you’ve had the delight of stumbling across this article, you are probably wondering what could this title mean. Just like how in society we can’t escape any and all forms of propaganda, in the world of React you also can’t escape what is known as props. In simple terms props in React stands for properties, and it is used to pass data from one component to the next. A major takeaway with props however is that they are passed in a uni-directional flow, flowing from parent components to corresponding child components. Down below I will take you through the wonderful world of props, and show you how valuable they are when you start creating all types of fun React products.
For this example, we will be going through an app with five react components, and show how props were used to cycle information throughout all the components. App.js will be our highest parent component, and we will use that as the starting point for our props. How we began this flow of data was by first utilizing useState for two components, and setting their initial state to be an empty array and an empty string. The reason why we are doing so is that for the empty array we will, later on, need to populate items into that array, and for the empty string we will be typing information that will be populated into a search bar down the line.
Next, we will create functions for dealing with our delete functionality and filter functionality that will be used for this app, and pass those functions down through the use of props.
Now we have our first example where the props come into play. App.js was the highest parent component, and we have two children components connected to App.js, and those children components are Header.js and ListingsContainer.js. Being that the flow of data is from parent to child I am able to pass any data from App.js down. Here is pass down the useState I initially made for search, and the functions for handling the delete, and for filter listings. The restructured syntax for passing down a prop is by first giving it a variable you want to call it, placing an equal sign after it, and then wrapping the piece of data you want into some curly brackets.
Now that we have created a prop we can now see how that information is passed down in the child components. In the ListiingCointainer.js we now have access to any of the props created in the App.js. When retrieving data from a prop you created in a parent component the syntax for using that data goes as follows. In the function where you will be pulling data, you call your function, open a set of parenthesis and a set of curly brackets, list all the variables you created for your props in your parent component, and then close out both the brackets and the parenthesis. Once that is done you can call on the variable in those sets of brackets and parenthesis and your information will now proceed to be passed down.
The return value will be a singular list card, which will be our lowest child component. For this next example of props, we proceed to use the handleDelete prop, from the App.js file, but now we are using the list prop we created in our return in the ListingsContainer.js component, as opposed to the listings prop we created in the App.js. The reason we are able to do that is that when we initially used the listings prop, it gave us all the listings on the page, but we took that same prop for all the listings mapped over it, to get all the individual listings and made a prop for those individual listings. Remember with props the info flows from parent to child and in this particular case, ListingsContainer is still a parent component of ListingCard. The information that is on each listed item is their, id, image, description, and location. In the example that I am about to show below because we made a prop that made the variable list equal to {listObj}, every time we call the list in the child component we will be referencing the listobj, which is the result of the total listings that were mapped over.
Here when we call list we are referencing the listObj, and you can now see how we can display the attributes of each listObj, by calling list followed by a period and then the attribute we are trying to show. Here we are able to show the image, descriptions, and locations of each list item. We are also able to use the handleDelete prop that we passed down from App.js here, and be very specific as to which item in which we want to be deleted when we call on the handle delete function. In the handleDeleteLocal function created here, we see the power of props and how we used a function created in the highest parent component and combined it with data from a lower parent component, and made them work together to produce an outcome. We used the id of each list item, and called that id as the argument in our handleDelete function, to get the delete functionality working.
I hope you enjoyed the content provided above. Props could be a difficult concept to grasp when one initially gets thrown into the world of React, but through repetition and some hands-on work, you can see how props can become a real game-changer in your applications that you create.
