Let's dive into fetching from an API and displaying that data in React JS using useEffect, useState & the JavaScript Map array method, using the Pokemon API! This tutorial is a bit more of a "real life" example of data fetching in React JS.
In this tutorial, we'll talk about fetching an API of Pokemon, displaying those Pokemon results and adding a new component for each result. In that new component, we'll do another fetch to show the Pokemon's abilities, based on a button called "Show more details". This way, we're relying on React state to determine whether or not to fetch more details for each item in the React list. We also talk about the importance of keys in map and much more.
This tutorial is a great place to find out how to fetch data in React and how to display it properly. A great place to turn to for beginners in React!
*Links mentioned*
useEffect Tutorial: https://youtu.be/kqzO1eiJTC4
Map Tutorial: https://youtu.be/jmIQrlrAwm0
Destructuring Tutorial: https://youtu.be/t_dMg_jPkXk
Link to the playlist for the full React JS tutorial series: https://www.youtube.com/playlist?list=PLcWTAEgFyJYKs_tZlyeXwUM_T6mdzoJZx
Oh, and if you're new to JavaScript as well, don't worry! Code Emily has got you covered with a comprehensive JavaScript tutorial series. Whether you're a React enthusiast or a JavaScript novice, we've got the resources you need to enhance your skills and become a proficient web developer. Check out our JavaScript tutorial series here: https://www.youtube.com/playlist?list=PLcWTAEgFyJYLqcy2RBM8RJr2kkdlwCAGR
00:00 Intro: Fetching Data from an API & Displaying it in a React Component
00:20 Exploring the Vite app that is up and running; going through useEffect & fetch
01:30 Mapping out the list of Pokemon data fetched from the Pokemon API
04:00 Adding a component for the Pokemon results
04:57 Building out the Pokemon component: Adding state for the showMore button click
07:01 Building out the Pokemon component: Fetching abilities using useEffect
08:21 Building out the Pokemon component: basing useEffect on the showMore state
09:10 Building out the Pokemon component: Mapping out the abilities for each Pokemon using Map
010:10 Outro & Thank you!
