Material-ui: [TextField] Warning: `value` prop on `input` should not be null

[ghost]

Problem description

TextField is throwing error when value prop of controlled component is null.

warning.js:44 Warning: `value` prop on `input` should not be null. Consider using the empty string to clear the component or `undefined` for uncontrolled components.
    in input (created by TextField)
    in div (created by TextField)

This seems to have been caused by upgrading React to 15.3.0.

Steps to reproduce

<TextField id="test" value={null} />

Versions

• Material-UI: 0.15.3
• React: 15.3.0
• Browser: Chrome 52.0.2743.82 (64-bit)

[ghost]

Temporary workaround is to do <TextField id="test" value={this.state.testValue || ''} />

[oliviertassinari]

This is not linked to Material-UI. You can reproduce it with a regular <input />: https://jsfiddle.net/9zg2bfx5/. I'm closing this issue.

[lejema160]

Hi ,
I've got this warning

Warning: `value` prop on `input` should not be null. Consider using the empty string to clear the component or `undefined` for uncontrolled components.
    in input (created by TextField)
    in div (created by TextField)
    in TextField (created by MyForm)
    in div (created by Paper)
    in Paper (created by MyForm)
    in MyForm (created by AuthorizationRequest)
    in div (created by AuthorizationRequest)
    in div (created by AuthorizationRequest)
    in div (created by AuthorizationRequest)
    in div (created by AuthorizationRequest)
    in div (created by AuthorizationRequest)
    in div (created by AuthorizationRequest)
    in AuthorizationRequest (created by Connect(AuthorizationRequest))
    in Connect(AuthorizationRequest) (created by RouterContext)
    in div (created by App)
    in div (created by App)
    in App (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in MuiThemeProvider
    in Provider

And here is the code of MyForm.js

import React from 'react';
import TextField from 'material-ui/TextField';
import Divider from 'material-ui/Divider';
import Paper from 'material-ui/Paper';
import MyRGOTree from './MyRGOTree.js';

export default class MyForm extends React.Component {

    render () {

        return (
            <Paper zDepth={2}>
                <TextField name="lastName" floatingLabelText="Nom utilisateur" style={{marginLeft: 20}} underlineShow={false} onChange={this.props.onChange} value={this.props.state.lastName}  />
                <Divider />
                <TextField name="firstName" floatingLabelText="Prénom utilisateur" style={{marginLeft: 20}} underlineShow={false} onChange={this.props.onChange} value={this.props.state.firstName} />
                <Divider />
                <TextField name="email" floatingLabelText="Email utilisateur" style={{marginLeft: 20}} underlineShow={false} type="email" onChange={this.props.onChange}  value={this.props.state.email} />
                <Divider />
                <h3 style={{marginLeft:30}}>Entité de l'utilisateur</h3>
                <MyRGOTree onCheck={this.props.onCheck} checkedKeys={this.props.state.service} multiple={false}/>
           </Paper>
        )
    }

}

What's wrong ?

I have also this warning when I start writing something in the TextField :

Warning: TextField is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

I am confused because before I didn't have it, but I changed nothing !

Thanks !

[telalwar]

@lejema160 Could you fix this problem ?

[agnihotriketan]

how to fix this ?? anyone has any solution??

[agnihotriketan]

Using defaultValue attribute worked for me in case of onblur.

[shrikrishnaholla]

If anyone else is here looking, this is not material-ui's fault. It's at the react layer. You can follow the discussion going on in this issue or this rfc pr to be apprised of developments

[cygniv404]

value={value ?? ''} in the case of input number. babel-env preset is needed for es10