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