done

src/Pokedex.js

@@ -1,11 +1,40 @@
-import React from 'react';
+import React, { useRef } from "react";
+import { PokemonType } from "./PokemonType.js";
+import { usePokemonAPI } from "./hook.js";
 
 export function Pokedex() {
+  const [selectedPokemon, getPokemonInfo] = usePokemonAPI();
+  const searchBox = useRef(null);
+
   return (
     <div>
-      <h4>
-        Edit <code>src/Pokedex.js</code> and save to reload.
-      </h4>
+      {selectedPokemon && selectedPokemon.species && (
+        <div>
+          <h4>{selectedPokemon.name}</h4>
+          <PokemonType type={selectedPokemon.types[0].type.name} />
+
+          {selectedPokemon.types.length > 1 && (
+            <PokemonType type={selectedPokemon.types[1].type.name} />
+          )}
+          <img src={selectedPokemon.sprites.front_default} alt="sprite" />
+        </div>
+      )}
+      <input ref={searchBox} />
+      <button
+        onClick={async () => {
+          getPokemonInfo(searchBox.current.value);
+        }}
+      >
+        Search
+      </button>
+
+      <button onClick={async () => getPokemonInfo("Squirtle")}>Squirtle</button>
+      <button onClick={async () => getPokemonInfo("Charmander")}>
+        Charmander
+      </button>
+      <button onClick={async () => getPokemonInfo("Bulbasaur")}>
+        Bulbasaur
+      </button>
     </div>
   );
-}
+}

src/hook.js

@@ -0,0 +1,18 @@
+import { useState } from "react";
+
+export function usePokemonAPI() {
+  let [selectedPokemon, setSelectedPokemon] = useState(null);
+
+  async function getPokemonInfo(name) {
+    const URL = `https://pokeapi.co/api/v2/pokemon/${name.toLowerCase()}`;
+    const response = await fetch(URL);
+    if (!response.ok) {
+      alert("Pokemon does not exist");
+      return;
+    }
+    const data = await response.json();
+    setSelectedPokemon(data);
+  }
+
+  return [selectedPokemon, getPokemonInfo];
+}