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 :- https://pokeapi.co/api/v2/pokemon/${Find}

Example:- https://pokeapi.co/api/v2/pokemon/pikachu

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";

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById("root")
);


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 (
    <>
      <PokeAPI/>
    </>
  );
}

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.
Eg: https://pokeapi.co/api/v2/pokemon/pikachu

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].type.name

Main Program -

PokeAPI.jsx

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(`https://pokeapi.co/api/v2/pokemon/${Find}`);
      console.log(res);
      setImg(res.data.sprites.front_default);
      setType(res.data.types[0].type.name);
    }

    getData();
  }, [Find]);

  const Typename = (event) => {
    setname(event.target.value);
  };

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

  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>
        </div>
      </div>
    </>
  );
}



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 - https://github.com/FidalMathew/Poke-Dex

Discussion (8)

Collapse
suyashvash 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.

Collapse
fidalmathew profile image
Fidal Mathew Author

Thanks a ton!! :)

Collapse
mfurmaniuk profile image
Michael • Edited on

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

Collapse
fidalmathew profile image
Fidal Mathew Author

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

Collapse
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.

Collapse
fidalmathew profile image
Fidal Mathew Author

Glad you liked it! 😄

Collapse
kasiriveni profile image
Srinivas Kasiriveni

Nice app

Collapse
fidalmathew profile image
Fidal Mathew Author

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