0

I'm trying to get the login function working, I've tried to learn from the examples, but keep gets the error TypeError: Cannot read property 'state' of undefined.

I'm not sure which part is causing the problem... The example had the handlesubmit as well but I thought the login function would just do the similar job.

enter image description here

All I'm trying to do is to let the inputs read the value that I type in and use it... please help

import React, { Component } from 'react';
import { Link } from 'react-router-dom'
import '../App.css';
import ReactDOM from 'react-dom';
import jwt from 'jsonwebtoken'

const API_URL = "http://131.181.190.87:3000"

  function login(){
    const url = `${API_URL}/user/login`
    const inputemail = {email: this.state.email};
    const inputpassword = {password: this.state.password};
    return fetch(url,{
      method: "POST",
      headers: { accept:"application/json","Content-Type":"application/json"},
      body: JSON.stringify({inputemail,inputpassword})
    })
      .then((res) =>res.json())
      .then((res) => {
        console.log(res)

      })
  }


class LoginPage extends Component {

  constructor(props){
    super(props);
    this.state={
      email:'',
      password:'' 
      };
      this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event){
    this.setState({
      [event.target.name]: event.target.value
    });
  }
    render(){
      return (
          <div className = "Login_Page">
        <h2>Login with your email and password</h2>

        <form className = 'Spacing'>
        <label className = 'Spacing_left'>
          Email:
        </label>
        <input 
          type="email"
          name="email"
          placeholder="Email"
          value={this.state.email}
          onChange={this.handleChange}
          required  />
      </form>

      <form className = 'Spacing'>
      <label>Password:</label>
          <input 
          type="password"
          name="password"
          placeholder="Password"
          value={this.state.password}
          onChange={this.handleChange}
          required  />


      </form>
      <br/>
      <button onClick={login}>Login</button>
      <h2>Not Registered yet? Register now!</h2>
      </div>);
      }
  }

export default LoginPage;
Naknak
  • 3
  • 5
  • `onClick={login}` will call `login` with `this` set to the DOM element, not your class instance. See the linked question's answers, but one option is to do what you've done with `handleChange` in your constructor to create a version of `login` that's bound to your component instance: `this.login = login.bind(this);` and then `onClick={this.login}`. – T.J. Crowder May 18 '20 at 08:16
  • Note: Sending passwords in the clear like that is not best practice. The endpoint should be using SSL. – T.J. Crowder May 18 '20 at 08:17
  • 1
    Thank you so much I didn't know you could read through a question that fast and solve it within a second. How do you give you a tick or thumbs up? – Naknak May 18 '20 at 08:24
  • :-) Glad that helped! You can upvote the comment above if you feel like it, but it's not important. Happy coding! – T.J. Crowder May 18 '20 at 08:42

0 Answers0