Recently I have been practicing manipulating api data in react. I have been practicing new technologies such as hooks and the use of axios. These are somewhat new technologies to me since I attended the flatiron bootcamp. In flatiron we never cover hooks or axios calls. I’m not sure why since they are predominate in the react coding word now. I have definitely noticed a cleaner and much more readable code base using hooks and axios and also the use of functional components. I was also so use to stateful components and passing props from one class component to another that the use of functional components were very foreign to me. In this blog I would like to share what I have done and how far I have gotten using functional components, hooks, and axios with the use of the Pokemon api.
I first started calling the data in the app component within a function that will later be called in a useEffect hook, this way provides an easier reading of the code. I then use the useState hook to store all the data collected from the call.
Here you can see I am using the function getPokemon from the useState function to store all the data that will later be passed to another component to then display the data. Notice in the useEffect I have put an empty array in the call back so that the useEffect only is called once. I the passed the data to a component called Pokemon where I had to use some clever javascript to pull the id from the Pokemon data.
Here in this code I am mapping through the props and splitting the url to give me the id of every Pokemon, this will be used later for showing the image of the pokemon. Stay tuned on how I present the pokemon images. Happy Coding!