title: Uncaught TypeError: Cannot read property 'touched' of undefined
body: <p>I keep getting this Unknown TypeError error when trying to validate my form in React using Redux and I can't find the solution for it. The error comes from EventForm here: </p>
  
  <pre><code>&lt;div className={`form-group ${title.touched &amp;&amp; title.invalid ? 'has-error' : ''}`}&gt;
  </code></pre>
  
  <p>and appears in the bundle.js.</p>
  
  <p>Seems like "fields" doesn't get defined for some reason. I can't figure out why.  </p>
  
  <p>This is my form component: </p>
  
  <pre><code>   // src/components/Form.js
  import React, { Component, PropTypes } from 'react'
  import style from './style.css'
  import { ControlLabel, FormControl, PageHeader, Grid, Checkbox, Radio, FormGroup, Button, HelpBlock, InputGroup } from 'react-bootstrap'
  import DatePicker  from 'react-bootstrap-date-picker';
  import FieldGroup from './FieldGroup'
  import { reduxForm } from 'redux-form';
  
  function validate(values) {
    const errors = {};
  
    if (!values.title || values.title.trim() === '') {
      errors.title = 'Enter a Title';
    }
    if (!values.categories || values.categories.trim() === '') {
      errors.categories = 'Enter categories';
    }
    if (!values.content || values.content.trim() === '') {
      errors.content = 'Enter some content';
    }
  
    return errors;
  }
  
  
  class EventForm extends Component {
  
    getInitalState() {
      var value = new Date().toISOString();
      return {
        value: value
      }
    }
  
    handleChange({value}) {
      this.setState({
        value: value
      });
    }
  
    dateGroup() {
      return (
        &lt;FormGroup&gt;
          &lt;ControlLabel&gt;Label&lt;/ControlLabel&gt;
          &lt;DatePicker value={this.state.value} onChange={this.handleChange} /&gt;
        &lt;/FormGroup&gt;
      );
    }
  
    render() {
      const { fields: { title, categories, content }, handleSubmit, submitting } = this.props;
  
      return (
        &lt;div className="container"&gt;
        &lt;form onSubmit={() =&gt; this.handleSubmit}&gt;
          &lt;div className={`form-group ${title.touched &amp;&amp; title.invalid ? 'has-error' : ''}`}&gt;
            &lt;label className="control-label"&gt;Title*&lt;/label&gt;
            &lt;input type="text" className="form-control" {...title} /&gt;
            &lt;div className="help-block"&gt;
              {title.touched ? title.error : ''}
            &lt;/div&gt;
            &lt;div className="help-block"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div className={`form-group ${categories.touched &amp;&amp; categories.invalid ? 'has-error' : ''}`}&gt;
            &lt;label className="control-label"&gt;Categories*&lt;/label&gt;
            &lt;input type="text" className="form-control" {...categories} /&gt;
            &lt;div className="help-block"&gt;
              {categories.touched ? categories.error : ''}
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div className={`form-group ${content.touched &amp;&amp; content.invalid ? 'has-error' : ''}`}&gt;
            &lt;label className="control-label"&gt;Content*&lt;/label&gt;
            &lt;textarea className="form-control" {...content} /&gt;
            &lt;div className="help-block"&gt;
              {content.touched ? content.error : ''}
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;button type="submit" className="btn btn-primary" &gt;Submit&lt;/button&gt;
          &lt;Link to="/" className="btn btn-error"&gt;Cancel&lt;/Link&gt;
        &lt;/form&gt;
        &lt;/div&gt;
    );
    }
  }
  
  export default reduxForm({
    form: 'PostsEventForm',
    fields: ['title', 'categories', 'content'],
    validate
  },)(EventForm);
  </code></pre>
  
  <p>Here is my reducer:</p>
  
  <pre><code>import { combineReducers } from 'redux';
  import { reducer as formReducer } from 'redux-form';
  //combineReducers adds all reducers into a single JSON of reducers
  const rootReducer = combineReducers({
   form: formReducer // ← redux-form
  });
  export default rootReducer;
  </code></pre>
  
  <p>And my index.js:</p>
  
  <pre><code>import { Router, Route, browserHistory } from 'react-router'
  import { syncHistoryWithStore } from 'react-router-redux'
  import { Provider } from 'react-redux'
  import ReactDOM from 'react-dom'
  import React from 'react'
  import RegisteredEventOverview from './components/RegisteredEventOverview'
  import bootstrap from 'bootstrap/dist/css/bootstrap.css'
  import EventForm from './components/EventForm/EventForm'
  import configureStore from './store/configureStore.js';
  
  const store = configureStore();
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;EventForm/&gt;
    &lt;/Provider&gt;
    ,document.getElementById('root')
  );
  </code></pre>
  
  <p>This is my package.json:</p>
  
  <pre><code>{
    "name": "take-me-out",
    "version": "1.0.0",
    "private": true,
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "start": "webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors --port 3002",
      "build": "NODE_ENV=production webpack --progress --colors"
    },
    "license": "MIT",
    "devDependencies": {
      "babel-core": "^6.5.2",
      "babel-loader": "^6.2.3",
      "babel-plugin-transform-runtime": "^6.5.2",
      "babel-preset-es2015": "^6.5.0",
      "babel-preset-react": "^6.5.0",
      "babel-preset-stage-0": "^6.5.0",
      "babel-runtime": "^6.5.0",
      "classnames": "^2.2.3",
      "css-loader": "^0.23.1",
      "file-loader": "^0.8.5",
      "jquery": "^3.1.0",
      "less": "^2.7.1",
      "less-loader": "^2.2.3",
      "postcss-loader": "^0.8.1",
      "react": "^15.3.2",
      "react-bootstrap": "^0.30.3",
      "react-dom": "^15.3.2",
      "react-hot-loader": "^3.0.0-beta.5",
      "react-redux": "^4.4.0",
      "react-revalidator": "^0.1.1",
      "react-router": "^2.0.0",
      "react-router-redux": "^4.0.0",
      "redux": "^3.3.1",
      "redux-actions": "^0.9.1",
      "redux-form": "^6.1.0",
      "redux-revalidate": "^0.1.0",
      "revalidate": "^0.4.1",
      "rucksack-css": "^0.8.5",
      "style-loader": "^0.13.0",
      "url-loader": "^0.5.7",
      "webpack": "^1.12.14",
      "webpack-dev-server": "^1.14.1",
      "webpack-hot-middleware": "^2.7.1"
    },
    "peerDependencies": {
      "revalidate": "&lt;1.0.0",
      "react": "^0.14.0 || ^15.0.0"
    },
    "dependencies": {
      "bootstrap": "^3.3.7",
      "redux-promise": "^0.5.3"
    }
  }
  </code></pre>