SamwithCode

Data Fetching in React js 2025 Async await Pokemon data fetch

Data Fetching in React JS 2025 using async/await (Pokemon API)

In React JS, you can use async/await inside useEffect to fetch data from an API like the Pokémon API. Here is an example:


import React, { useEffect, useState } from 'react';

function Pokemon() {
  const [pokemon, setPokemon] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch('https://pokeapi.co/api/v2/pokemon/charizard');
        const data = await res.json();
        setPokemon(data);
        setLoading(false);
      } catch (error) {
        console.error("Error fetching Pokémon:", error);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return 
Loading...
;
  }

  return (
    

      
{pokemon.name}

      {pokemon.name}
      
Base Experience: {pokemon.base_experience}

    

  );
}

export default Pokemon;