Following the Flow

React can be a complicated tool when first starting out, it's easy to lose track of the passing of information and frustrating to get back on track once you get lost. So I hope I can provide some insight into understanding how you can keep track of your data when passing it around your app.

The most important part is understanding the "tree" of your app, take the image below for example.

you can see how the data flows from the top down to the lower components, also know as the children or grandchildren, depending how low they sit in the tree. It's always crucial that when you are working in a react application that you first and foremost draw out your "tree" so that you know what information is being passed where. I will use snippets of our second phase at Flatiron for an example of just the basic idea of data flow.

Now like in the image above we start by building our tree. We had our App.js file, which acts as the parent to all the other components we were going to build.

Go ahead and ignore the Route and Switch for now, those will come later. focus on the core components. We have the app, which leads down to the Form, Counter, Wallet, Search, and ComicList, which ComicList contains a Child or GrandChild called Comic. now I'm sure you're asking "how do I know where to start?" these next couple of steps will get you there.

I mentioned STATE earlier, if you are new to React and are lost I highly recommend reading up here:

The first piece of advice I can give when trying to figure these things out is to slow down, and plan what you need to do and take it one step at a time. so,

Step 1:

what do we need to do? If you need to just get information on the page what components are going to need that data to be able to render it?

Step 2:

Plan on how you will need to do that. What is the job of each component going to be tasked with? What data are they going to need to be able to preform that job? If two siblings need the SAME data how will you pass that down to them both?

Step 3:

Take it slow and remember to back track if you get lost.

Lets look at the code

Let's say you have already written out your fetch and got your data appearing in your console tools. But now you need to pass the information to its desired component. In the tree to our project you saw a ComicList with a grandChild Comic. If I was a betting man, I'd put my money on those two being in charge of displaying the information. Now if you did your fetch correctly, and to be sure here is a best practice example:

then you are already using the setState Function "setComicList"
if the best practice method is new to you please read up here.

ComicList is acting as the container that renders each individual comic, So lets pass the State Variable we created to maintain this newly acquired data down to that component like so.

now that the data has reached ComicList, we need to use a method to get each object out of the array and give it some individuality. that method is the .map() method. it looks a little something like this.

what this is doing is taking that state variable containing our data, iterating through the array {...} and picking out each object using the key={} so use the ID to identify each object. the Spread also allows us to de-structure the data so it makes it easier for use to input what we want our comic cards to look like. and since we created the Comic component in our map function. the data has been successfully passed. the final step is placing the passed data in its correct places. Now I mentioned that we de-structured our data using the spread operator in the map function, what that looks like is this.

and what it is referring to is in our db.json file.

our destructured data matches the data inside the db.json file and we use it that way to target those unique identifiers!

now all there is to do is place it in the correct places with {} like so.

and with that you have correctly fetched data, passed it down, mapped it, and passed it to its desired location and rendered it to your page!

There is so much more to understand when it comes to data flow and the passing of information but I hope this was a good lesson in understanding the basic flow of passing information.

If i have left you confused I highly recommend researching some of the things I have mentioned in this blog. .map(), State, useEffect, async and await. are all highly useful and crucial to understand. Here are a couple links to get you going on your journey!