2

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;
user3284707
  • 3,033
  • 3
  • 35
  • 69
  • 3
    It doesn't look like the code you've posted will cause the issue and when I mount this component as is I'm not getting any warning. Could you post the whole component that is causing the warning? – Cameron Downer Aug 30 '18 at 08:43
  • I have used just the exact code above in my application and it still throws the error.. This is why I am confused as I have loads of other components like this which all work fine. The only difference is that I am loading this directly into the view, rather than having it inside another component. – user3284707 Aug 30 '18 at 08:46
  • Could you post the warning you are getting? – Cameron Downer Aug 30 '18 at 08:48
  • The warning I get is just the one posted above in the yellow box – user3284707 Aug 30 '18 at 08:51
  • If this is the exact component you are using then the problem isn't in this component. – Cameron Downer Aug 30 '18 at 08:56
  • Brilliant thank you for your help... I had to make a change to allow async await in the babel config, so thinking perhaps it may be that instead – user3284707 Aug 30 '18 at 08:57

1 Answers1

1

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.

user3284707
  • 3,033
  • 3
  • 35
  • 69