rick-and-morty-api

gistfile1.txt

import { useEffect, useState } from 'react'
import './App.css'
import axios from 'axios';

type Character = {
  image: string;
  name: string;
}

type APIResponse = {
  info: {
    count: number;
    pages: number;
    next: string | null;
    previous: string | null;
  },
  results: Character[]
}

function App() {
  const [characters, setCharacters] = useState<Character[]>([]);

  useEffect(() => {
    async function fetchData() {
      // TODO: colocar o loading
      // TODO: tirar a url hardcoded
      // TODO: fazer um tratamento de erro
      const result = await axios.get("https://rickandmortyapi.com/api/character/");
      const data: APIResponse = result.data;
      setCharacters(data.results) 
    }

    fetchData();
  }, [])

  return (
    <>
      {
        characters.map(character => {
          return (
            <div>
              <img src={character.image} />
              <p>{character.name}</p>
            </div>
          )
        })
      }
    </>
  )
}

export default App