Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

Custom Hooks - Clase 02

Al renderizar la app con el mismo código que el Instructor recibo un error por la forma en que está exportada la función isAuth. En cambio si la función la exporto desestructurada como { isAuth } la app renderiza correctamente. Me podrían explicar a qué se debe? Comparto las capturas de pantalla con el error y mi código con el que pude ejecutar la app.

import React, { useState, useEffect } from "react";

const useAuth = (jwt) => {
    const [ isAuth, setIsAuth ] = useState(true);

    useEffect(() => {
    if (jwt.length > 25) {
        setIsAuth(true)
    } else {
        setIsAuth(false)
    }
    }, []);

    return isAuth;
};

export { useAuth };

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta
solución!

¡Hola Ezequiel!

Gracias por compartir tu pregunta y código. El error que estás recibiendo se debe a que estás importando la función useAuth de manera incorrecta. En tu código, estás exportando la función como un objeto con la sintaxis export { useAuth }, lo que significa que cuando la importas en otro archivo, debes hacerlo como un objeto también, es decir, usando la sintaxis de desestructuración { useAuth }.

Si quieres exportar la función directamente, sin tener que hacerlo como un objeto, puedes hacerlo de la siguiente manera: export default useAuth;. De esta manera, cuando la importes en otro archivo, podrás hacerlo sin usar la sintaxis de desestructuración, simplemente escribiendo import useAuth from './useAuth';.

Espero que esto te ayude a resolver tu problema. Si tienes alguna otra duda, no dudes en preguntar. ¡Espero haber ayudado y buenos estudios!!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)