Redux-form-material-ui: Issue with TextField and DatePicker

[hirenchauhan2]

For DatePicker, I'm getting this warning:

`import DatePicker from 'material-ui/DatePicker'`
....
Warning: Unknown props `input`, `meta` on <input> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in input (created by TextField)
    in div (created by TextField)
    in TextField (created by DatePicker)
    in div (created by DatePicker)
    in DatePicker (created by ConnectedField)
    in ConnectedField (created by Connect(ConnectedField))
    in Connect(ConnectedField) (created by Field)
    in Field (at Create.js:69)
   ....

And if I do import DatePicker from redux-form-material-ui
I get hit with ➡️ #37

And for TextField, I'm getting this warning:

warning.js:36 Warning: TextField contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://fb.me/react-controlled-components

[eL-HaXo]

Import DatePicker from redux-form-material-ui and add the following to your Field component:

format={(v) => ((v === '') ?  null : v)}

The component should look like:

<Field
  component={DatePicker}
  name={this.props.name}
  format={(v) => ((v === '') ?  null : v)}
/>

[talha131]

@eL-HaXo Your answer helped me. Otherwise I was getting warning. Can you please explain how adding format prop fixes the warning?

Warning: Failed prop type: Invalid prop `value` of type `string` supplied to `DatePicker`, expected `object`.
    in DatePicker (created by renderDateField)
    in renderDateField (created by ConnectedField)
    in ConnectedField (created by Connect(ConnectedField))
    in Connect(ConnectedField) (created by Field)
    in Field (created by AddStudentInternal)

[eL-HaXo]

@talha131 The component is not expecting an empty string. The anonymous function that I pass to the format prop returns null (the expected type) if the value is an empty string.

[advance512]

Any fix for the TextField warning?

[talha131]

@eL-HaXo Thanks a lot. Makes sense.

To any one else, this is what my final version looks like

<Field
  name="enrollmentyear"
  component={renderDateField}
  label="Date of Enrollment"
  format={v => (v === '' || v === undefined ? new Date() : new Date(v))} // Important
/>

@advance512 have you tried the solution @eL-HaXo suggested? Which warning you are getting?

[advance512]

@eL-HaXo's fix seems to be related to the DatePicker, not the TextField.

I am getting the following warning:

warning.js:36 Warning: TextField contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://fb.me/react-controlled-components

[erikras]

You need to remove the defaultValue={null} on TimePicker and DatePicker.

113

[MtDalPizzol]

Just run into this and solved it using reduxForm initialValues as mention in the "No Default Values" of the README.

<Field name='birthday' component={DatePicker} hintText='Birthday' />

function mapStateToProps ({ auth: { authenticated } }) {
  return {
    initialValues: {
      birthday: {}
    },
    authenticated
  }
}

export default connect(mapStateToProps, actions)(
  reduxForm({
    form: 'signup'
  })(SignUp)
)

[EstebanBorai]

You can also use this.props.initialize({...}) and set it to the componentWillReceiveProps method.
Setting Initial/Default Values
componentWillReceiveProps() { this.props.initialize({ fieldName: 'defaultValue' }); }