Redux-form-material-ui: Can not type any text in TextField

[Tushant]

With below code, i cannot type anything on the textfield. I mean to say nothing gets type in the textfield. Autocomplete works though. Why is it not showing the text i have typed?

What might be the reason for this issue? Have i done somewhere mistake?

`````` javascript
import React, { Component } from 'react';
import _ from 'lodash';

import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';

import {
AutoComplete as MUIAutoComplete, MenuItem,
FlatButton, RaisedButton,
} from 'material-ui';

import {
AutoComplete,
TextField
} from 'redux-form-material-ui';

const validate = values => {
const errors = {};
const requiredFields = ['deviceName', 'deviceIcon', 'deviceTimeout'];
requiredFields.forEach(field => {
if (!values[field]) {
errors[field] = 'Required';
}
});
return errors;
};

class DeviceName extends Component {

handleSubmit = (e) => {
e.preventDefault();
this.props.handleNext();
}

render() {
const {
handleSubmit,
fetchIcon,
stepIndex,
handlePrev,
pristine,
submitting
} = this.props;
const listOfIcon = _.map(fetchIcon.icons, (icon) => ({
text: icon.name,
id: icon.id,
value:
primaryText={icon.name}
leftIcon={

{icon.name}

}
/>
}));
return (

name="deviceName"
component={TextField}
floatingLabelStyle={{ color: '#1ab394' }}
hintText="Device Name"
onChange={(e) => this.setState({ deviceName: e.target.name })}
/>

name="deviceIcon"
component={AutoComplete}
hintText="icon"
openOnFocus
filter={MUIAutoComplete.fuzzyFilter}
className="autocomplete"
dataSource={listOfIcon}
onNewRequest={(e) => { this.setState({ deviceIcon: e.id }); }}
/>

name="deviceTimeout"
component={TextField}
floatingLabelStyle={{ color: '#1ab394' }}
hintText="Device Timeout"
ref="deviceTimeout" withRef
onChange={(e) => this.setState({ deviceTimeout: e.target.name })}
/>

label="Back"
className="back-btn"
onTouchTap={() => handlePrev()}
style={{ marginRight: 12 }}
/>
label={stepIndex === 4 ? 'Finish' : 'Next'}
primary
disabled={pristine || submitting}
className="our-btn"
onTouchTap={(e) => handleSubmit(e)}
/>

);
}
}

const mapStateToProps = ({ fetchIcon }) => ({
fetchIcon
});

const DeviceForm = reduxForm({
form: 'DeviceForm',
validate,
})(DeviceName);

export default connect(mapStateToProps)(DeviceForm);```
``````

[zazapeta]

Remove all of these :
onChange={(e) => this.setState({ deviceName: e.target.name })}

Redux-form handle change for you. You do not need to handle it.
If you need to get the value of a field, use 'ref' or read it from the 'store'.

[Tushant]

Yes removing onChange works. Thanks

[zakdances]

I'm not using onChange and typed text doesn't appear.

[Tushant]

Can you show your code, please?

[zakdances]

@Tushant

import * as React from 'react';

import './AddRowForm.scss';

import { reduxForm, Field } from 'redux-form'

import {
  TextField
} from 'redux-form-material-ui'

class AddRowForm extends React.Component<any, any> {
  render() {
    return (
      <form>
        <Field name="firstname" component={TextField} hintText="First Name"/>
        <Field name="lastname" component={TextField} hintText="Last Name"/>

        <Field name="occupation" component={TextField} hintText="Occupation"/>
        <Field name="username" component={TextField} hintText="Username"/>

      </form>
    )
  }
}


export default reduxForm({
  form: 'myForm'
})(AddRowForm as any)

[Tushant]

What error do you get?

[zakdances]

@Tushant I think my problem is that I haven't set up the proper Redux-Form reducer. I'm investigating now.

[Tushant]

You can copy paste this reducer to see if it works or not. Just for your ease to know if your issue will solve by setting reducer or not. If not then we can further discuss.

import { reducer as reducerForm } from 'redux-form';

const rootReducer = combineReducers({
 form: reducerForm
});

export default rootReducer;

[zakdances]

@Tushant Looks like it's working now with your suggestion. Thanks for the help. What was confusing me was the form key. It _can't_ be given a different name...it _must_ be written as form. And there was no error message to offer a clue to my mistake.

[yoslev]

Thanks Tushant - I missed some important detail.
Didn't know that I have to combine reducer " form: reducerForm"
const rootReducer = combineReducers({
form: reducerForm
});
I keyed in text and nothing displayed on fields.
I spent 1.5 hours for finding your tip!
Thanks.

[acampbell4444]

yes

[nuprakash]

its not working for me