Consumiendo la api de Rick and Morty desde React

Rick and Morty API + ReactJS

Te recomiendo ver el proyecto antes de continuar.

Recuerda importar axios

Usamos create-react-app para crear nuestra aplicación, para este ejercicio uso axios por lo que no debes olvidar instarlo.

import { useState, useEffect } from 'react'
import './App.css'
import axios from 'axios'
import Super from './components/Super'
import Grid from './components/Grid'
import Footer from './components/Footer'
import API from './services/api'

La documentación de la api .

function App() {
  const [character, setCharacter] = useState([])
  const [characterTarget, setCharacterTarget] = useState('')
  const [page, setPage] = useState(1)
  const [statusOption, setStatusOption] = useState('')
  const [speciesOption, setSpeciesOption] = useState('')
  document.title = `${characterTarget.name || 'React Rick & Morty API'} | React Rick & Morty API`
}

export default App

Inicializamos los hooks:

character = Carga los datos del resultado de la petición a la API

characterTarget = Almacena los datos del personaje seleccionado

page = Controla la paginación

speciesOption = Filtrar por especie para hacer el filtro de los personajes

statusOption = Almacena el estatus para hacer el filtro de los personajes

Con el trucazo del document.title = ${characterTarget.name ||"React Rick & Morty API"} | React Rick & Morty API; se actualiza el titulo de la página por cada selección.

useEffect(() => {
  window.scrollTo(0, 0)
  const getcharacter = async () => {
    await axios
      .get(`${API}${page}&status=${statusOption}&species=${speciesOption}`)
      .then(({ data }) => {
        setCharacter(data.results)
        setCharacterTarget(data.results[0])
      })
      .catch((err) => {
        setPage(1)
        console.log(err)
      })
  }
  getcharacter()
}, [page, statusOption, speciesOption])

El hook useEffect contrala las peticiones al sitio y solo refrescará la página cuando se cambie el estado de las variables.

return (
<div className="App" id="top">
  <Super characterTarget="{characterTarget}" />
  <Grid
    character="{character}"
    setCharacterTarget="{setCharacterTarget}"
    characterTarget="{characterTarget}"
  />
  <footer
    setPage="{setPage}"
    page="{page}"
    statusOption="{statusOption}"
    setSpeciesOption="{setSpeciesOption}"
    setStatusOption="{setStatusOption}"
    setCharacterTarget="{setCharacterTarget}"
  />
</div>
);

Al final solo paso los parametros por props a los componentes.

Te comparto el código completo. Saludos.