No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

¡Prueba de fuego!

13/15
Recursos

Aportes 4

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

En mi caso no me funcionaba porque faltaba la dependencia de prop-types(hice mi proyecto con Vite).
La solución fué poner prop-types como dependencia normal (no de desarrollo) en la librería:

  "dependencies": {
    "@emotion/css": "^11.9.0",
    "prop-types": "^15.8.1"
  },
  "devDependencies": { ... }

Yupi!!!

Ascribe la función para el botón before de esta manera para evitar que el ID sea menor a 1

const handleDecrease = () => {
    idChar > 1
    ? setIdChar(idChar - 1)
    : setIdChar(1) 
  }

yo le añadí 2 nuevos estados

const [back, setBack] = useState(true)
const [next, setNext] = useState(false)

y se los di como valor de la propiedad disabled de los botones, y estos mismos estados los utilice como sentencia para un operador ternario para controlar el valor de la propiedad bgColorHover

<Button disabled={back} width="150px" height="40px" bgColorHover={back ? '' : 'red'} onClick={handleDecrement}>{'<Back'}</Button>
<Button disabled={next} width="150px" height="40px" bgColorHover={next ? '' : 'green'} onClick={handleIncrement}>{'Next>'}</Button>  

todo esto con el fin de limitar el valor de numCharacter, que nunca pueda ser menor a 1 o mayor a 826 (numero de personajes de la API), la interfaz no lo permitirá, y para eso utilice una función para controlar los estados de back y next

const handleDisabled = ()=> {
  if (numCharacter === 1){
    setBack(true)
  } else {
    setBack(false)
  }

  if (numCharacter === 826){
    setNext(true)
  } else {
    setNext(false)
  }
}

esta función se ejecutara cada vez que el valor de numCharacter cambie

useEffect(()=> {
  gettinCharacter(numCharacter)
  handleDisabled()
}, [numCharacter])

el código completo quedaría de esta manera
src/App.js:

import { useEffect, useState } from 'react';
import { Button, ContainerFlex, MediaImg, Text } from 'curso-creacion-librerias-ui'
import { gettinData } from './services';


function App() {
  
  const [back, setBack] = useState(true)
  const [next, setNext] = useState(false)
  const [numCharacter, setNumCharacter] = useState(1)
  const [characters, setCharacters] = useState({})

  const gettinCharacter = async (character)=> {
    const response = await gettinData(character)
    setCharacters(response)
    console.log(response)
  }

  useEffect(()=> {
    gettinCharacter(numCharacter)
    handleDisabled()
  }, [numCharacter])

  const handleDisabled = ()=> {
    if (numCharacter === 1){
      setBack(true)
    } else {
      setBack(false)
    }

    if (numCharacter === 826){
      setNext(true)
    } else {
      setNext(false)
    }
  }

  const handleIncrement = ()=> {
    setNumCharacter(numCharacter+1)
  }

  const handleDecrement = ()=> {
    setNumCharacter(numCharacter-1)
  }


  return (
    <div className="App">
      <ContainerFlex
        flexDirection="column"
        justifyContent="space-evenly"
        alignItems="center"
        height="100vh"
        gap="8px"
      >
        <MediaImg src={characters.image || ''} width="200px" height="200px" alt={characters.name || ''} />
        <Text component="h3" fontSize="18px" lineHeight="10px">{characters.name}</Text>
        <Text component="p" fontSize="18px" lineHeight="10px">{characters.id}</Text>
        <Text component="p" fontSize="18px" lineHeight="10px">{characters.species}</Text>
        <Text component="p" fontSize="18px" lineHeight="10px">{characters.status}</Text>
        <ContainerFlex
          flexDirection="row"
          justifyContent="center"
          alignItems="center"
          gap="8px"
        >
          <Button disabled={back} width="150px" height="40px" bgColorHover={back ? '' : 'red'} onClick={handleDecrement}>{'<Back'}</Button>
          <Button disabled={next} width="150px" height="40px" bgColorHover={next ? '' : 'green'} onClick={handleIncrement}>{'Next>'}</Button>  
        </ContainerFlex>
      </ContainerFlex>
    </div>
  );
}

export default App;

src/services.js:

const urlFetch = 'https://rickandmortyapi.com/api/character/'

export const gettinData = async (character)=> {
    const response = await fetch(`${urlFetch}${character}`, {
        method: 'GET'
    })
    const payload = response.json()

    return payload
}