Pokemon + Learning = FUN
I’m a man who gets very lost on Youtube(as you can see from my previous blog). I go from video to video and watch with no remorse even though I have many things to do. Lately I’ve been getting into Pokemon videos for some reason. Specifically people playing the gameboy games and beating them with a certain set of rules their viewers tell them to abide by. Seeing people challenge themselves to beat the whole game with nothing but a Magikarp puts me in awe. Its amazing and while watching these videos it always brings me a part of the joy I felt when I was younger and had the patience to play these games. I still feel that joy whenever Pokemon gets mentioned in my life and I felt that joy at times during my time at Flatiron’s Schools bootcamp, doing their many Pokemon themed labs. My favorite lab of those being ‘Pokemon Searcher.’
The lab wants the coder to make a fetch to a given API and display the first 150 Pokemon and have the ability to add a Pokemon. After forking and cloning the lab. You want to see how your components are setup, the way I look at it is like making a tree.
You have a total of 6 components but you really only need 4. Four because Index handles App.js but letting it render on the DOM and App.js is the App itself. Now when making the fetch you could make it in App.js. However you would have to do an extra step when passing props through the App, and coders are lazy so forget about that. You can make the fetch in PokemonIndex.js and get the job done.
You want to set state in PokemonIndex with a blank array. I set mine with a blank array titled ‘pokemon’, and I then used a lifecycle method to make the fetch. After making the fetch you always want to constantly test your code by rendering it in the console. From the picture on the right you can see that the fetch is successful due to the fact that you can see the array of Pokemon with an amount of 150 once it is mounted.
Once you fill your state up with Pokemon you want to pass it from PokemonIndex.js to PokemonCollection.js via props and once you pass it you want to test it via the console. ALWAYS TEST.
Now the lab wants you to render a Pokemon Card for each Pokemon. So right now you have an array of Pokemon via props. What you could do is iterate through the array via a method. My method of choice is the ‘Map’ method which will go through the whole array and render a card for each Pokemon. However the data for each card isn’t filled out because the coder will have to display each exact characteristic of the Pokemon.
Now I know you’re reading this blog thinking “O wow I hope he keeps going”, but I’m afraid I’m not going to. It is time for you to figure things out. Coding is all about testing things until you figure it out. I will do a part 2 soon, but for now, its your turn to render the details of each Pokemon on the DOM.
