In this app we demonstrate few fundamental concepts of handling API concepts in React.
Selects a pokemon option from a dropdow and makes a single API call for each selection. This is done using only Axios as an external library and vanilla React.
ChangeEvent
is a built-in type for event handlerspokemonData
stores the fetched datasetSelectedPokemon
tracks the currently selected pokemon's name (string)setPokemonData
a function to updatepokemonData
ChangeEvent: Type from React, used for typing the event in event handlers.
-
useState
is used to manage the dropdown state and the fetched data -
useEffect
to make the API call when the dropdown values changes, but only if the data hasn't been fetched before -
selectedPokemon
state is updated when we select something from the dropdown.
const [selectedPokemon, setSelectedPokemon] = useState("");
useEffect
hook listens for changes toselectedPokemon
- it is triggered when
pokemonData
orselectedPokemon
changes. - when you select a pokemon
(selectedPokemon)
and no data is loaded(!pokemonData)
an API call is made fetching the data about that selected pokemon. - the double dependency is an extra safe way to control the effect:
- it runs whenever the state of
selectedPokemon
changes - this happens on selection from the dropdown
- the API call is made
pokemonData
seems redundant but it is not. We check ifpokemonData
isnull
before making the API call. This ensure the API call is made only if the data isn't already fetched. Hence, no wasted API calls.pokemonData
is a safeguard - this practice is optional, but recommended.
useEffect(() => {
if (selectedPokemon && !pokemonData) {
axios
.get(`https://pokeapi.co/api/v2/pokemon/${selectedPokemon}`)
.then((response) => {
setPokemonData(response.data);
})
.catch((error) => console.error("Error fetching data:", error));
}
}, [pokemonData, selectedPokemon]);
- when
selectedPokemon
is udpated, andpokemonData
isnull
it means no data has been fetched,and therfore an API call is made for to fetch the data of the selected pokemon. - the data is stored in
pokemonData
and this persists across renders.
- when a different pokemon is selectd,
pokemonData
is reset to null byhandleSelect
to allow a new fetch.
const handleSelect = (event) => {
setPokemonData(null);
setSelectedPokemon(event.target.value);
};
useState<string>("")
: InitializesselectedPokemon
as an empty string.useState<PokemonData | null>(null)
: InitializespokemonData
as null.PokemonData
is likely a custom interface or type representing the structure of the data received from the Pokémon API.
useEffect
is used for side effects, in this case, fetching data when the selected Pokémon changes.- The API call is made only if a Pokémon is selected (
selectedPokemon
) andpokemonData
is not already fetched. axios.get
makes a GET request to the Pokémon API.- The dependency array
[pokemonData, selectedPokemon]
means this effect runs when eitherpokemonData
orselectedPokemon
changes.
handleSelect
is an event handler for the<select>
element.- When a new Pokémon is selected, it resets
pokemonData
to null and setsselectedPokemon
to the selected value.
- The component conditionally renders Pokémon data (
<h3>
for the name and an<img>
for the sprite) ifpokemonData
is available.
- The dropdown contains hardcoded options for Pokémon like "Pikachu", "Charmander", and "Bulbasaur".
- More options can be added similarly.
This component is a typical example of a React functional component utilizing hooks for state management and side effects. It demonstrates fetching and displaying data based on user input, a common pattern in React applications.