DEV Community

Cover image for Build Pokemon Finder using React and Pokeapi
Fidal Mathew
Fidal Mathew

Posted on • Updated on

Build Pokemon Finder using React and Pokeapi

Hi folks, hope you are doing good. In this post, we are going to build a Pokedex (app to give information about pokemon for it's name) using React.js.

Pokedex Project

Node Packages Required -
“Axios”: npm i axios

API endpoint :-${Find}


Get Started :

Let’s create our react app with create-react-app pokedex-app
Run npm start to check if your app is up and running.

After setup, clean App.css

Index.js -

import React, { StrictMode } from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

    <App />

Enter fullscreen mode Exit fullscreen mode

Create a new Component named PokeAPI.jsx or PokeAPI.js
(using “jsx” notifies the editor that you are working with react, and provides better suggestions)

Include the component in the App.js file,

import PokeAPI from './PokeAPI';
import './App.css';

function App() {
  return (

export default App;

Enter fullscreen mode Exit fullscreen mode

API Info :

Let’s look at the information we are going to need via API.

We need the name, picture, and pokemon type.

There is a ton of information available for each pokemon -

If you take a look, you can find
Image at ->sprites.front_default
Type at ->types[0]

Main Program -


import React, { useState, useEffect } from "react";
import axios from "axios";
export default function PokeAPI() {
  const [name, setname] = useState("");
  const [Find, setFind] = useState("pikachu");
  const [Img, setImg] = useState("");
  const [Type, setType] = useState("");

  useEffect(() => {
    async function getData() {
      let res = await axios.get(`${Find}`);

  }, [Find]);

  const Typename = (event) => {

  const Search = () => {
    if (name !== "") setFind(name);

  return (
      <div className="back">
        <div className="card">
          <img src={`${Img}`} alt="" />
          <div className="name">{Find.toUpperCase()}</div>

          <div className="type">{Type}</div>

          <input type="text" onChange={Typename} value={name} />

          <button onClick={Search}>Search</button>

Enter fullscreen mode Exit fullscreen mode

UseState variables:

We need 4 useState variables -

  • name - Update user input
  • Img - Update image
  • Type -Update pokemon type
  • Find - Update the API url

Program Explanation :

  1. On user input, will call a function “Typename()” to keep the name updated.
  2. On submit, Search() is called, and "Find" value is updated if it’s not null.
  3. We have used a useEffect Hook to change “img” and “type” when the “Find” value is updated. By default on reload, the Find is set to “pikachu”.
  4. Inside useEffect, we are fetching the data from API, via axios.get(“api-endpoint-url”) and store it in res, and later update images and the pokemon-type.

I hope you liked this small project.
Thank you for reading!

Source Code -

Top comments (8)

suyashdev profile image
Suyash Vashishtha

That's a Nice app idea for React js beginners to get Started with Rest API's and hooks. Great work mate.

fidalmathew profile image
Fidal Mathew

Thanks a ton!! :)

mfurmaniuk profile image
Michael • Edited

Wonder if I can get my kids into this, though they'd just ask where they can find them in Go

fidalmathew profile image
Fidal Mathew

All the best! I feel nostalgic when I think about pokemon :)

kidxs profile image
Angelo Geant Gaviola

Awesome small project! Thanks for sharing this with us Mathew!

In my opinion, this is a great small project to learn how to consume data from APIs.

fidalmathew profile image
Fidal Mathew

Glad you liked it! 😄

kasiriveni profile image
Srinivas Kasiriveni

Nice app

fidalmathew profile image
Fidal Mathew

Thank you! I'm glad you liked it :)