Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 2x 2x 2x 13x 13x 13x 13x 2x 2x 2x 1x 1x 13x 1x 13x 4x | import React, { useState } from "react"; import axios from "axios"; import "./Pokemon.css"; const getPokemonByColor = (color) => `https://pokeapi.co/api/v2/pokemon-color/${color}/`; const App = () => { const [pokemons, setPokemons] = useState([]); const [error, setError] = useState(null); const [search, setSearch] = useState(""); const handleFetch = async (event) => { event.preventDefault(); let result; try { result = await axios.get(getPokemonByColor(search)); setPokemons(result.data.pokemon_species.slice(0, 5)); } catch (error) { setError(error); } }; const handleChange = (event) => { setSearch(event.target.value); }; return ( <div> {error && <span>Something went wrong ...</span>} <form onSubmit={handleFetch}> <div> <input id="search" type="text" value={search} onChange={handleChange} placeholder="Pokemon Color" className="search" /> </div> <button className="search-button" type="submit" data-testid="button"> Fetch Pokemons </button> </form> <ul className="pokemons"> {pokemons.length > 0 && pokemons.map((pokemon) => ( <li className="pokemon-item" key={pokemon.name}> <a className="pokemon-link" href={pokemon.url}> {pokemon.name} </a> </li> ))} </ul> </div> ); }; export default App; |