0

I am new to ReactJS and creating a login page using React JS and laravel API. When I click the login button after inserting the email address and password it says the above error.

This is my code

import React, { Component } from 'react';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
import axios from 'axios';
import  { Redirect } from 'react-router-dom'


class Login extends Component
{
  onClick(event)
  {
    var self = this;
    var payload={
      "email":this.state.email,
      "password":this.state.password
    }
  //"role":this.state.loginRole

    axios.post('http://127.0.0.1:8000/api/login', payload)
    .then(function (response)
    {
      console.log(response);
      if(response.data.code == 200)
      {
        //Set localstorage:
        const userDetails = {userName: this.state.email}
        localStorage.setItem('userDetails', JSON.stringify(userDetails));

        console.log("Login successfull");
        return <Redirect to='/Master'  />

        var uploadScreen=[];
        //  uploadScreen.push(<UploadPage appContext={self.props.appContext} role={self.state.loginRole}/>)
        self.props.appContext.setState({loginPage:[],uploadScreen:uploadScreen})
      }
      else if(response.data.code == 204)
      {
        console.log("Username password do not match");
        alert(response.data.success)
      }

      else
      {
        console.log("Username does not exists");
        alert("Username does not exist");
      }
    })

    .catch(function (error)
    {
      console.log(error);
    });
}
  render()
  {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="8">
              <CardGroup>
                <Card className="p-4">
                  <CardBody>
                    <h1>Login</h1>
                    <p className="text-muted">Sign In to your account</p>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="icon-user" />
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input type="text" placeholder="Username" />
                    </InputGroup>
                    <InputGroup className="mb-4">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="icon-lock" />
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input type="password" placeholder="Password" />
                    </InputGroup>
                    <Row>
                      <Col xs="6">
                        <Button color="primary" className="px-4" onClick={(event) => this.handleClick(event)}>
                          Login
                        </Button>
                      </Col>
                      <Col xs="6" className="text-right">
                        <Button color="link" className="px-0">
                          Forgot password?
                        </Button>
                      </Col>
                    </Row>
                  </CardBody>
                </Card>
                <Card
                  className="text-white bg-primary py-5 d-md-down-none"
                  style={{ width: 44 + "%" }}
                >
                  <CardBody className="text-center">
                    <div>
                      <h2>Sign up</h2>
                      <p>
                        Are you a new user to the Restaurant system? Hooray now , you can create an account...
                      </p>
                      <Button color="primary" className="mt-3" active>
                        Register Now!
                      </Button>
                    </div>
                  </CardBody>
                </Card>
              </CardGroup>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Login;

In this case I gave the following as the payload

Username : admin@admin.com
Password : 123456

the above credentials are valid in Laravel API. What wrong in this code to get error as TypeError: _this2.handleClick is not a function?

test team
  • 507
  • 1
  • 8
  • 23
  • Where's your handleclick function? Cant see it in the code. And also ... _this2 ... where is that? Can't find it either – weibenfalk Nov 26 '18 at 09:43

2 Answers2

2

Your function is defined to be onClick and not handleClick, Also if only you need to call a function with the default parameters such as event, you don't need to make use of arrow function, you can simply write

onClick={this.onClick}

and bind it in constructor or define it as a class property with arrow function 

onClick = (event) => {}

or

constructor(props){
   super(props);
   this.onClick = this.onClick.bind(this);
}

Also Redirect is supposed to be rendered but it can't be rendered from within the axios request or onClick handler. Instead you can make use of this.props.history.push to redirect. Check Programmatically Navigate using react-router question for more details

Shubham Khatri
  • 211,155
  • 45
  • 305
  • 318
1

I believe you want to name onClick to handleClick

Ovi
  • 86
  • 5
  • if I change to `handleClick`, after that click not works. – test team Nov 26 '18 at 10:09
  • You've got `onClick(event)` a few lines after the class definition, change that to `handleClick(event)`, not the `onClick` event on the button. You want to have the `onClick={(event) => this.handleClick(event)}` untouched! – Ovi Nov 26 '18 at 10:14