CODEWITHSUNDEEP
javascriptreactjs
user3284707
user3284707

Reputation: 3341

React app. Can't call setState on a component that is not yet mounted

I am getting the following warning when I try and change the value on an input field.

Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the Login component.

I cannot understand why this is happening, it is not happening on any of my other react pages.

The only difference is that this is the login page so has it's own routing to the page.

Can anyone help? I've stripped my component back to the bare bones to see if anyone can spot what I am doing wrong.

import React, { Component } from 'react';

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ''
        };

        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({ [e.target.name]: e.target.value });
    }

    render() {
        const { username } = this.state;

        return (
            <input type="text" placeholder="Email" className="form-control" name="username" autoComplete="email" value={username} onChange={this.onChange} />
        );
    }
}

export default Login;

Upvotes: 2

Views: 12466

Answers (1)

user3284707
user3284707

Reputation: 3341

The problem wasn't because of my component, it was because I had changed my webpack config to support async await es7 feature. to the following...

"presets": [ "es2017" , "stage-0" , "react" ]

instead I actually needed to do the next answer down and install

npm install --save-dev regenerator-runtime

https://stackoverflow.com/a/51650116/3284707

Doing the answer from the link above fixed my problems.

Upvotes: 1

Related Questions