email validation issue

[lielran]

I copy paste the code sample of the email validation.
the result is that I'm getting this is the console:

warning.js:36 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the XXXXX component.

and I failed to update the email property in the state on the component.

[NewOldMax]

It's just a rude example, not real code, just shows how to work with this library.
Btw I don't have this error with example from readme.

[NewOldMax]

Try to add

this.state = {
    email: '',
};

into constructor

[lielran]

@NewOldMax - this the first thing I tried...didn't work
what do I missing? it is react or the library issue?

[NewOldMax]

Here is correct code 100% working, I test it right now:

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator';

class SomeForm extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            email: '',
        };

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

    handleChange(event) {
        const email = event.target.value;
        this.setState({ email });
    }

    handleSubmit() {
        // your submit logic
    }

    render() {
        const { email } = this.state;
        return (
            <ValidatorForm
                ref="form"
                onSubmit={this.handleSubmit}
            >
                <TextValidator
                    floatingLabelText="Email"
                    onChange={this.handleChange}
                    name="email"
                    value={email}
                    validators={['required', 'isEmail']}
                    errorMessages={['this field is required', 'email is not valid']}
                />
                <RaisedButton type="submit" label="submit" />
            </ValidatorForm>
        );
    }
}

export default SomeForm;

Check that your code isn't missing anything.
And what React version you have?

[lielran]

still the same 😞
react 15.5.4

[NewOldMax]

Do you have 'prop-types' library in your project?

[lielran]

yes. with a version of 15.5.10

[NewOldMax]

Can you provide your full code? Not for this component, but for parent component

[lielran]

sure.
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Login from './Login';

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

// Render the main app react component into the app div.
// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
ReactDOM.render(
  <MuiThemeProvider><Login/></MuiThemeProvider>
  , document.getElementById('root'));

Login.js

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';


const style = {
  margin: 12,
};

class Login extends React.Component {


  constructor(props) {
    super(props);
    this.state = {
      email: '',
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    const email = event.target.value;
    this.setState({ email });
  }

  handleSubmit() {
    // your submit logic
  }
  render() {
    const { email } = this.state;
    return (
    <ValidatorForm
      ref="form"
      onSubmit={this.handleSubmit}>
      <TextValidator
        floatingLabelText="Email"
        onChange={this.handleChange}
        name="email"
        value={email}
        validators={['required', 'isEmail']}
        errorMessages={['this field is required', 'email is not valid']}
      />
      <RaisedButton type="submit" label="login" className="button-submit" primary={true}/>
      <RaisedButton label="Register" secondary={true} style={style}/>
    </ValidatorForm>
    );
  }
}

export default Login;

[lielran]

I tried also not to use prop-types.still the same

[NewOldMax]

Your code works without any errors for me. Maybe you have some issue in node_modules, try to reinstall packages.

[lielran]

still the same after rm -rf node_modules and install them all over with yarn.
maybe it's the material-ui version(0.18.1)?

[NewOldMax]

I have it and all works fine

[NewOldMax]

Try to install with npm, not yarn

[lielran]

also with npm. I also tested on multiple browsers.
this is all the dependencies I'm using:

    "material-ui": "^0.18.1",
    "prop-types": "^15.5.10",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-hot-loader": "next",
    "react-material-ui-form-validator": "^0.3.1",
    "react-tap-event-plugin": "^2.0.1"