Fetching API Data in React JS - Pokemon Data 2025
🧠 Fetching API Data in React JS – Pokemon Data 2025
In this example, we’ll fetch data from the https://pokeapi.co/api/v2/pokemon API and display the names of Pokémons. This is useful for understanding how to make API calls in useEffect.
✅ Example:
import React, { useEffect, useState } from 'react';
function PokemonList() {
const [pokemons, setPokemons] = useState([]);
useEffect(() => {
async function fetchData() {
const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10');
const data = await response.json();
setPokemons(data.results);
}
fetchData();
}, []); // empty array means it runs once on mount
return (
Pokemon List
{pokemons.map((pokemon, index) => (
- {pokemon.name}
))}
);
}
export default PokemonList;
✅ Note: Always use useEffect to call APIs inside React function components. The dependency array [] ensures it doesn't call the API infinitely.