0

Estoy haciendo un botón de hilandero de carga(loading spinner), cuando oprimo el botón aparece el icono de carga pero no desaparece al tiempo marcado, y sigue con la carga. Aquí les dejo el código:

Componente Loader:

import React from 'react'

function Loader(){

    return(
        <>
        <div className="loaderIcon"></div>
        <style jsx>
        {`
        .loaderIcon{
            border: 10px solid #f3f3f3;
            border-radius: 50%;
            border-top: 10px solid #3498bd;
            width: 60px;
            height: 60px;
            animation: spin 2s linear infinite;
        }
        @keyframes spin{
            0% { transform: rotate(0deg);}
            100% { transform rotate(360deg);}
        }
        `}
        </style>
        </>
    )
}

export default Loader;

Componente LoadingButton:

import React, {useState} from 'react';

import Loader from '../components/loader'


function ButtonLoading(){

    const [loading, setLoading] = useState(false)

    function loadData(){
        setLoading ({loading: false})

        setTimeout(()=>{
            setLoading({loading: true});
        }, 1000);

    }
    return(
        <>
        <div>
        <button className="btnLoading" onClick={loadData} disabled={loading}>
        {loading &&(<Loader/>)}
        {loading && <span className="oneSpan">Cargando pagina</span>}
        {!loading && <span className="twoSpan">Cargar Datos</span>}
        </button>
        </div>

        <style jsx>
        {`
        .btnLoading{
            background-color: green;
        }
        .oneSpan{
            color: red;
            font-size: 20px;
        }

        .twoSpan{
            color: black;
            font-size: 20px;
        }
        `}
        </style> 
        </>
    )
}

export default ButtonLoading;
1
  • Hola :D no he probado netamente tu codigo ni estoy muy familiarizado con los Hooks pero no deberia ser: setLoading(false) en lugar de pasarle un objeto? { loading: false } ?
    – Angel
    Commented el 3 dic. 2019 a las 20:24

1 respuesta 1

1

La variable que devuelve el hook loading debe contener un valor bool, no un objeto

Una vez aclarado eso, deberías cambiar

cambiar setLoading({loading: true}); por setLoading(true);

cambiar setLoading({loading: false}); por setLoading(false);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.