[TextField] Fix controlled input warning in React 15

[maticrivo]

Problem Description

I'm getting this error after upgrading to React 15 and MUI 0.15.0-beta.1

TextField is changing a uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa)

Versions

• Material-UI: 0.15.0-beta.1
• React: 15.0.1
• Browser: Google Chrome Canary (Version 52.0.2712.0 canary (64-bit))

[nathanmarks]

@maticrivo Please review your use of the input -- this is not a material-ui issue

[nathanmarks]

@maticrivo more info: facebook/react#5864

React DOM now warns if an input switches between being controlled and uncontrolled.
@TheBlasfem in #5864

[brandonmikeska]

Is this going to be fixed in 2.0 or do we need a fix before that is done?

[davidpelayo]

it would be nice to have it fixed

[abelosorio]

Mmmm... any ideas on how avoid it?

Am I doing something wrong?

<TextField type="text" fullWidth={ true } label="Project" value={ project } onChange={ event => this.setState({ project: event.target.value }) } /> 

[kachkaev]

@abelosorio I also faced this just now. Seems that here's how things should be done in the new API:

  <TextField
    value={ value }
-  onChange={ handleValueChange }
+  InputProps={{
+    onChange: handleValueChange,
+  }}
  /> 

[abelosorio]

Thanks @kachkaev, I'll try it.

[stiofand]

I'd like to get this fixed to, I have the same issue, but I do not understand @abelosorio soution, could you explain more?

[abelosorio]

Hi @stevematdavies. I wrote that code in a project where I'm not working anymore. I can't remember exactly how I fixed that, but the problem (as I remember) was in using onChange directly instead of using InputProps as @kachkaev suggested.

Anyway, my comment was not a suggested solution but only the code where I got the warning message.

[rsweeneydev]

In React 15+, you will get a warning if you change the value prop of an input from undefined (uncontrolled) to a non-null value (controlled). If you are seeing this warning, then it's probably because you are not initializing value in your component state to an empty string.

constructor(props) {
    super(props);
    this.state = {value: ''};
}

render() {
    return (<TextField value={this.state.value} onChange={this.handleChange} />);
}

[magician11]

@rsweeney21 exactly!

I changed my initial state in Redux for two Selects from

const initialState = {
  clientData: null,
  year: null,
  month: null
};

to

const initialState = {
  clientData: null,
  year: '',
  month: ''
};

where year and month are the values for the Select components.

This warning then disappears.