TypeError: this.props.handleLogin is not a function

import React, { Component } from "react";
class Login extends Component {
    constructor() {
        super();
        this.handleSubmitLogin = this.handleSubmitLogin.bind(this);
        this.state = {
            username: "",
            password: "",
            signupEmail: "",
            signupPassword: "",
            account: {},
        }
    }

    handleChange = (e) => {
        this.setState({[e.target.name]: e.target.value});
    }

    handleSubmitLogin = (e) => {
        e.preventDefault();

        fetch('/rest/login', {
            method: 'POST',
            redirect: 'follow',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                username: this.state.username,
                password: this.state.password,
            })
        }).then(response => {

            if (response.status === 401) {
            alert("Wrong combination, please try again");
            window.location.href =  'http://localhost:3000/login';
            
            }
            else if (response.status === 201)
            {
                this.props.handleLogin();
                this.props.history.push(`/dashboard/${this.state.username}`, {state: this.state.username});

            }
            })
           .catch(function(error) {
            
                alert(error);
            });
        }

    render() {
     const username = this.state.username;
     const password = this.state.password;
     return ( 
    <div>
     <div style=>
        <div style={appStyle}>
            <div style={formStyle}>
            <b>Log in</b>
            <br/>
            <br/>
            <form onSubmit={this.handleSubmitLogin}>
                <table border="0">
                    <tbody>
                        <tr>
                            <td>username:</td>
                            <div style={inputStyle}>
                                <input type="username" name="username" size="20" autocorrect="off" spellcheck="false"
                                       autocapitalize="off" value={username} onChange={this.handleChange}/>
                            </div>
                        </tr>
                        <tr>
                            <td>Password:</td>
                            <div style={inputStyle}>
                                <input type="password" name="password" size="20"
                                       required value={password} onChange={this.handleChange}/>
                            </div>
                        </tr>
                    </tbody>
                </table>
                <br/>
                <input style={submitStyle} type="submit" value="Submit"/>
            </form>
            <a href="forgot">Forgot your password?</a>
            <br/>
             <a href="forgotusername">Forgot your username?</a>
            <br/>
            <div>
                Don't have an account? 
                <a href="/signup"> Sign Up Here!</a>
            </div>
            <br/>
            </div>
        </div>
        </div>
        </div>
        );
    }
}

export default Login;

**app.js**
    import Login from "./components/Login";
    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          isLoggedIn: false,
        };
        this.handleLogin = this.handleLogin.bind(this);
      }
    
      handleLogin() {
        console.log("in handle login:  ");
        this.setState({
          isLoggedIn: true,
        });
      }
     
    //More Code below 

When the user successfully login, i want to set isLoggedIn to true > with this.props however, this is throws an error. i included the > binding. Any suggestions? I feel like it's just a small error........................................................................... ..........................................................................

---

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW