Passing props into functional components -React JavaScript

So far, It’s been 3 weeks since we first started learning React at Flatiron school. We wrapped up vanilla Javascript and I was excited to start learning how to code with React. I figured that since React is a JavaScript library and I had already learned JavaScript, React would be easy. What I didn’t realize was that there were several concepts in React that are not only difficult to understand, but are absolutely necessary in order to begin developing with React.

When learning React many people struggle with the concept of “props” (short for properties). I struggled with the concept. Fellow classmates struggled with the concept. Students in the cohort behind our cohort struggled with the same concepts. And I’m quite certain anyone learning React will struggle with the concept of props at first. If you are here because you are struggling with the concept, I want to assure you that you are not alone. But what I also want assure you, that with a little time and practice, you will understand it perfectly. During React project week at Flatiron School, developing my own React project has helped me to really understand this concept. So let’s jump right in.

When designing your application understanding the component structure of your applications is key. Depending on your application, this structure will determine the flow of information (or the passing of props) from one component to another. In React, we refer to components as either a parent component or a child component. I want you pause right there and think about the words “parent” and “child”. Then think of what a family tree looks like. When a mother and father have children, the children inherit the parents traits, or properties (props). Now think of a brother and sister. You cannot pass your traits (props) onto your sibling. They must inherit those traits (props) from your parents. The same basic rules apply in React. There is one caveat however. And this is passing passing of props to Parent components. Children are allowed to pass props to their Parents. But it must be done in a very specific way. Children may pass props to their parent only by using a callback function. However that function must live in the Parent for it to work. The graphic I created below shows the relationships when passing props from one component to another.

So now the question is, “How exactly do we pass props in React?” Let’s dive right in. Take the following code snippet below. This block of code is from my most recent React project. In this example, I created a functional component. I fetched data from an API. I mapped through the array of objects that the API returned and set a the mapped data to a return a single object. I then set that object to a variable named “item”. The reason is because I wanted to pass a single object to the child component instead of the entire array.

Remember that in order for the parent to pass props down to the child, the parent must render the child in the return. In the case above the child is rendered inside the return as <FlipCard />. To pass the variable of “item” to <FlipCard /> we first need to name the property like this: item={}. Then we need to assign item={} a value. Like this: item={value}. In my case it made sense to just not only name the property “item” but also the value “item”.

So in theory, <FlipCard item={item} /> should now have the prop of “item” now being passed to it correct? Well not so fast! We need to now navigate to <FlipCard /> and pass those props down to it by passing it in as a argument into the child function. See below example.

It’s always a good practice to validate that the data is being passed down to the child. So let’s do that first so we avoid any errors while building your child component. Make sure your application is running in the browser. If you are fetching data from a mock backend server using a db.json file, ensure your server is running by entering the following command into terminal

Now start up your application by running the npm start command in terminal

In your browser open up the “Developer tools” and navigate to “Components” (Pro tip: Ensure you have the React Developer Tools extension installed in Chrome.

After clicking on the components tab, find your component in the component tree. If you have react router set up navigating the tree may be a bit messy but if you set up your components correctly, imported and exported them correctly, you will see your component in the tree. Click on the component that we just passed props into. In this case, it is <FlipCard />. If you have passed your props correctly you will see the object in the props panel.

Note: If you are passing an empty object it will look like like the above example. If you are passing information inside that object it will look like the example below. Either way, you now have confirmed that you passed the props down correctly. If you do not see an object in your props panel, back track to the component you attempted to pass the props down from and attempt to troubleshoot what the problem may be. If you were console logging the object in that component but somehow the props did not make it to the child component, then the issues is likely an error in how you attempted to pass the prop.

The final thing to know about passing props down to child components is how does the child pass the prop that it received from the parent down to its own child? It ‘s very simple. If you remember above, the prop that was initially passed down was called item={}. We assigned item={} a value of “item” so that it looked like this: item={item}. Then passed it to the FlipCard component like so … <FlipCard item={item} />. We then went to the <FlipCard /> component and passed in props as and argument. Essentially, the word prop in the child component contains the item object that was passed down from the parent. So in order to pass that prop down to a grandchild component, we do so by using the words “prop.item” to pass it further down to child/grandchildren components. (see below example)

Passing props up to parent components: At the beginning of this blog I mentioned one caveat. And that was that children have the ability to pass props up to a parent component via a callback function. In the example below, there is a parent component with a function called “editPizza( )”. That function is passed down as a prop to its child component. The child component then calls that function via a callback (always remember!…if you ever want to use a function, all you have to do is call its name!). During the callback, the child passes the argument of “props.pizza” to the function. By doing this, the function that lives in the parent component now has access to the props that the child passed in as an argument. And that is how we pass props up to Parent components.

It is my hope that this has helped clear up some things about passing props that my have been confusing. In closing, remember a few things. Props can only travel up or down. They cant be transferred directly to siblings. (you can however pass a prop up to a parent and back down to a sibling). However, if you going through the trouble of doing that, you may need to rethink your component structure (unless there is no other way). And remember…props can be passed to Parent components via a callback function. On a side note, Props on class components are passed similarly but always remember that class components need to use a certain syntax (this.props). Functional components will use the props.item syntax