Fetching with {useState, useEffect} and .mapping to cards

This Friday will be the end of Phase-2-React. I am sad to see it go! I actually enjoyed my time learning React, in comparison to Phase-1-Javascript.

But, I know this is only the beginning. Everywhere I look, React is the language in demand. I have a feeling that I will see and use React for a long time.

Thinking back to when I started my first labs with useState, I remember thinking, "...WHAT?". Now just a week and a half later we are pulling from a public API, POST-ing and PATCH-ing, mapping, filtering, etc. for a Project.

I wanted to make a quick run through of a React GET request and how we map over our superhero array to give us a singular superhero card. My wish is for React to look a little less daunting.

Here is a small piece of my Phase 2 Project- Superheroes
"Fetching with {useState, useEffect} and .mapping to cards"

The wireframe path our data will take looks like this:
API => fetch GET request => pass our state (heroes) as props down components => map over heroes to get a single hero => catch our hero's data and display to card.

Simple right?

First we need to import {useState} and {useEffect} Hooks. These imports allow us to use the hooks in our initial App component. Then we need to set State.

Since our API is giving us a huge array of superheroes (731), we will set our State to heroes, and our setState function to setHeroes.

Thats one hook out of the way. Now let's fetch our array with useEffect.

We are fetching data from a public API so we want to use useEffect. Why?

"Fetching data from an API...[is] considered [a] side-effect, as it's possible to have a different output for the same input.
This is why useEffect is the hook for us - by fetching data, we're making our React component impure, and useEffect provides us a safe place to write impure code." - Max Rozen

Fetching data inside useEffect is very similar to our fetching with Javascript. A crucial difference being the empty array at the back end of the function. This set of brackets stops an endless fetch of data that will quickly fill your terminal.

Ctrl Z if you forgot! I learned from experience -

Once we have our giant array of heroes we want to pass it down as props. So we will go down into the JSX return section of our function and find our child component. In my case I will be passing down heroes to and then

We then catch the props down in the HeroContainer component.
Here is where we map through our array to send a single hero to cards.

Finally, we catch the single hero data from the parent component and start filling in our card.

Because our API had extra information per hero, we had to iterate through our array with dot notation. For example, to grab our hero's intelligence score we needed to grab our hero's data. Then jump down to powerstats, and lastly down to intelligence score. {hero.powerstats.intelligence}.

That looks a little like this.

So we used useState and useEffect to successfully fetch our heroes from a public API. We passed State as props all the way down the tree to our lowest component, taking a short pitstop to map through our array, giving us a single hero. And we end up with hero cards like below: