A n00b Approach in Keeping Track of Props in React

As I continue my journey in Flatiron School’s Web Development coding bootcamp, I thought I had a solid understanding on how to set and access props in React. As we learned more complex and dynamic functionalities of React, I would always get stuck in the simple task of passing props from one component to another component (especially when you need multiple components and you have to juggle different files storing all of your components). I went down the dark rabbit hole of clicking through the different component files, adding props where I think it would work and not achieving this one simple task. This led to frustration and killing my growth mindset in solidifying this skill.

What I learned is that I was simply reading the code the wrong way — in other words, I was not following the flow of data the code was executing. The best way I could describe it was I was reading the code top to bottom file-by-file, instead of tackling one component at a time.

Before we get to the technical aspect of my approach with props, let’s first understand what defines a prop. Props help us make our components more dynamic and reusable. Props allow us to pass values into our components. I like to think of props as prop-erties of the object we are passing into child components. In other words, any data you want to pass into a component (I’ve primarily been using objects), you can render that information with by defining and calling props in that component.

For this simple example (and when I say simple, I mean super-simple. I’m very new to this so bear with me y’all…) I created a static webpage that greets the user with the date and an affirmation to start your day. I want it to look something like this:

Since it’s such a simple website, we can easily hard-code this to render and ta-da! all done! However, that’s not how this works.

First thing I did was create a functional component called Affirmation where I set the <div> for a header the user’s icon, a greeting for the user, the date, and an affirmation.

From there I created a variable to hold the info I am trying to render:

Finally, I set up my render to show the data I want:

Now where do I put the data I want rendered? This is the part that always confused me. I know I already set the variable comment to house the data in the meantime, so how do I access it? I set the props in the component under render.

To keep up with naming convention, I labeled each prop what they are rendering, in this case, the date, affirmation, and user. On the other side of the equal sign, you call that prop (in this case, the variable comment) and use dot notation to retrieve the specific key you need:

Note I had a console.log(props) below the Affirmation function declaration to confirm the props are being sent in. You should get a response from your console detailing the object(s) that are being passed:

Confirming that the props are correctly being passed, I can now interpolate those props within the return of my Affirmation function to render the information I wanted to show (Note: I had to create a helper method to format the date correctly):

The biggest takeaway from this very simple exercise was HOW to read the code. Instead of reading the Affirmation function first, I needed to go down to where React was rendering elements into the DOM and see what and where they are showing. In this case, the Affirmation component is being rendered (<Affirmation />) and each prop is defined right below it. Thus, when I see props.affirmation in the Affirmation functional component, I see that the ‘affirmation’ prop is defined as comment.affirmation. Therefore, the data in props.affirmation is the same as the data in comment.affirmation, it’s just being sent to the Affirmation component as a prop. That’s how I connected the dots. Thus, instead of reading up and down, I had to identify the starting point and follow the clues in the code to see where it was coming from.

I hope this different way of seeing props helps make translating React code a lot less dizzying and more methodical. At the end of the day, you want to take one small task at a time, instead of jumping towards the end result.