Untitled

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {

  const [pokemon, setPokemon] = useState("pikachu");
  const [pokemonData, setPokemonData] = useState([]);
  const [pokemonType, setPokemonType] = useState("");

  const getPokemon = async () => {
    const arrayData = [];
    

    try{
      const url = `https://pokeapi.co/api/v2/pokemon/${pokemon}`;
      const respons = await fetch(url);
      const result = await respons.json();
      arrayData.push(result); 
      console.log(arrayData);
      setPokemonType(result.types[0].type.name)
      setPokemonData(arrayData);

    }
    catch (e) {
      console.log(e);
    }
  };


  const handleChange = (e) => {
    setPokemon(e.target.value.toLowerCase())
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    getPokemon();

  }


  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input 
        type="text" 
        onChange={handleChange} 
        placeholder='Enter pokemon name'></input>
      </form>
      {pokemonData.map((data) => {
        return (
          <div>
            <img src={data.sprites["front_default"]}></img>
            <ul>
              <li>Name: {data.name}</li>
              <li>Type: {pokemonType}</li>
              <li>Height: {data.height}</li>
              <li>Weight: {data.weight}</li>
            </ul>
          </div>
        );
      })}
    </div>
  )
}

export default App