How can I hide a Component when the login search is completed

Asked

Viewed 398 times

1

How can I pick up hide a component when the bank result is completed.

Code:

import React, { Component } from 'react';
import axios from 'axios';

class Login extends Component {
    state = {
        user: '',
        senha: ''
    }

    formLogin = () => {
        console.log('carregando..');

        axios.post('../../auth/login', {
            email: this.state.user,
            senha: this.state.senha
        })
        .then(resultado => {
            if (!resultado.data.verifUser) {
                console.log("Dados errado");
            }

            console.log('Terminou');
        });
    }

    render() {
        return (
            <div className="Login">
                <div className="form-group">
                    <label for="inputEmail">E-mail</label>
                    <input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" placeholder="Digite seu email" onInput={(e) => this.setState({ user: e.target.value })} name="txtEmail" />
                    <small id="emailHelp" class="form-text text-muted">Informe o seu e-mail que foi cadastrado ou usuĂ¡rio</small>
                </div>
                <div class="form-group">
                    <label for="senha">Senha</label>
                    <input type="password" class="form-control" id="senha" placeholder="*******" name="txtSenha" onInput={(e) => this.setState({ senha: e.target.value })} />
                </div>
                <button type="submit" class="btn btn-primary" onClick={() => this.formLogin()}>Entrar</button>
            </div>
        );
    }
}

export default Login;
javascript react

  • Usually, if there is an incorrect user/password, the same page remains and somehow alerts the user of the error. If not then it is redirected to another page, a Dashboard, for example

  • Freitas, could you rephrase your question so that it becomes clearer and more understandable? I want to help you but I don’t understand your question.

  • Allan Andrade, I need when the request is triggered to trigger a loading div for the user to see, and when it is done, this div leaves

1 answer

0

You need a state to control the style or change a class, I made an example by changing the style directly:

import React, { Component } from 'react';
import axios from 'axios';

class Login extends Component {
    state = {
        user: '',
        senha: '',
        // State para controlar a exibição do componente
        isHide: false
    }

    formLogin = () => {
        console.log('carregando..');

        axios.post('../../auth/login', {
            email: this.state.user,
            senha: this.state.senha
        })
        .then(resultado => {
            // Após a consulta, esconder div
            this.setState({ isHide: true })
            if (!resultado.data.verifUser) {
                console.log("Dados errado");
            }

            console.log('Terminou');
        });
    }

    render() {
        return (
            <div className="Login">
                // Ternário para alterar valor do display para none ou block
                <div style={ { display: this.state.isHide ? 'none' : 'block' } }>
                  // div a ser escondida ou exibida
                </div>
                <div className="form-group">
                    <label for="inputEmail">E-mail</label>
                    <input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" placeholder="Digite seu email" onInput={(e) => this.setState({ user: e.target.value })} name="txtEmail" />
                    <small id="emailHelp" class="form-text text-muted">Informe o seu e-mail que foi cadastrado ou usuĂ¡rio</small>
                </div>
                <div class="form-group">
                    <label for="senha">Senha</label>
                    <input type="password" class="form-control" id="senha" placeholder="*******" name="txtSenha" onInput={(e) => this.setState({ senha: e.target.value })} />
                </div>
                <button type="submit" class="btn btn-primary" onClick={() => this.formLogin()}>Entrar</button>
            </div>
        );
    }
}

export default Login;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

  • Thanks for the answer. But you say that isHide was not defined, so I used this to reference it, and the error disappeared. Only I put a "<p>Loading</p>" inside the div where has the comment "div to be hidden" to test, but the <p> is always visible

  • I was looking at the documentation and I kind of saw to do something like this. But tbm does not appear or add the div.

  • state = { user : ', password: ', isLoading: false } render(){ if(this.isLoading){ Return( <div classname="loading"> <i class="fas fa-spinner fa-4x fa-spin"></i> </div> ); }Else{ Return( <div classname="Login"> <p> </p> </div> ); } }

  • @Freitas had forgotten "this.state", I just edited the answer.

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.