Can not type any text in TextField

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?

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:
                                <MenuItem
                                  primaryText={icon.name}
                                  leftIcon={
                                          <i className="material-icons md-23">
                                              {icon.name}
                                          </i>
                                          }
                                />
                      }));
    return (
        <div className="device-name-form">
            <form>
                <div>
                    <Field
                        name="deviceName"
                        component={TextField}
                        floatingLabelStyle={{ color: '#1ab394' }}
                        hintText="Device Name"
                        onChange={(e) => this.setState({ deviceName: e.target.name })}
                    />
                </div>
                <div>
                    <Field
                        name="deviceIcon"
                        component={AutoComplete}
                        hintText="icon"
                        openOnFocus
                        filter={MUIAutoComplete.fuzzyFilter}
                        className="autocomplete"
                        dataSource={listOfIcon}
                        onNewRequest={(e) => { this.setState({ deviceIcon: e.id }); }}
                    />
                </div>
                <div>
                    <Field
                        name="deviceTimeout"
                        component={TextField}
                        floatingLabelStyle={{ color: '#1ab394' }}
                        hintText="Device Timeout"
                        ref="deviceTimeout" withRef
                        onChange={(e) => this.setState({ deviceTimeout: e.target.name })}
                    />
                </div>
                <div style={{ marginTop: 12 }}>
                  <FlatButton
                    label="Back"
                    className="back-btn"
                    onTouchTap={() => handlePrev()}
                    style={{ marginRight: 12 }}
                  />
                  <RaisedButton
                    label={stepIndex === 4 ? 'Finish' : 'Next'}
                    primary
                    disabled={pristine || submitting}
                    className="our-btn"
                    onTouchTap={(e) => handleSubmit(e)}
                  />
                </div>
            </form>
        </div>
    );
  }
}

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

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

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

[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.