score:0

import { withrouter } from 'react-router';

class login extends react.component {

    state = {
        email: '',
        password: '',
        errors: {},
        redirect: false
    }

    validateform = () => {
        let errors = {};
        let formisvalid = true;

        if(!this.state.email) {
            formisvalid = false;
            errors['email'] = 'please enter email to continue';
        }

        if(!this.state.password) {
            formisvalid = false;
            errors['password'] = 'please enter password to continue';
        }

        this.setstate({
            errors: errors
        })

        return formisvalid;
    }

    handlechange = (event) => {
        this.setstate({
            [event.target.id]: event.target.value
        });
    }

    handlesubmit = (event) => {
        event.preventdefault();
        // console.log(this.state);
        if(this.validateform()) {
            const logindata = {
                email: this.state.email,
                password: this.state.password
            }
            axios
                .post('/users.json', logindata)
                .then(response => {
                    this.props.history.push("/dashboard");
                    console.log(response.data);
                })
                .catch(error => {
                    console.log(error);
                })
        }

    }


    render() {
        return (
            <div classname="container">
                <form onsubmit={this.handlesubmit} classname="white">
                    <h5 classname="grey-text text-darken-3">login</h5>
                    <div classname="input-field">
                        <label htmlfor="email">email</label>
                        <input type="email" id="email" onchange={this.handlechange} />
                        <p>{this.state.errors.email}</p>
                    </div>
                    <div classname="input-field">
                        <label htmlfor="password">password</label>
                        <input type="password" id="password" onchange={this.handlechange} />
                        <p>{this.state.errors.password}</p>
                    </div>
                    <div classname="input-field">
                    <button onclick={this.redirecthandler} classname="btn btn-primary">login</button>
                    </div>
                </form>
            </div>
        )
    }
}

export default withrouter(login);

score:0

have some complain about your code.

  1. first: for form validation and handling you dont need to use state, there is a library called formik which will help you a lot with this.
  2. second: if you are using redux to check user is logged in or not you need to create a private route for routes which cannot be accessible for public like here dashboard component.
  3. third: to use history you need to wrap your component inside withrouter hoc which will pass route props to your component so you can use history or if your are using functional component you can use usehistory() hook.

Related Query

More Query from same tag