title: cannot read property of map undefined using React redux
body: <p>I'm trying to add information to a component but as soon as I click on the form button I get cannot read property map of undefined. Please help. 
  I've checked all the Db and routes, reducers etc. and they're all fine. </p>
  
  <p>Here is component containing the form (The console.log returns "undefined") </p>
  
  <pre><code>import React from "react";
  import { connect } from "react-redux";
  import { addExercise } from "../actions/exercises";
  
  class CreateExercise extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        newExercise: {},
      };
    }
    handleSubmit(e) {
      e.preventDefault();
      e.target.reset();
      this.props.dispatch(addExercise(this.state.newExercise));
    }
  
    updateDetails(e) {
      let newExercise = this.state.newExercise;
      newExercise[e.target.name] = e.target.value;
      this.setState({ newExercise });
    }
    render() {
      console.log("anything", this.props);
      return (
        &lt;div className="form-container"&gt;
          &lt;form onSubmit={this.handleSubmit.bind(this)}&gt;
            &lt;h2&gt;Exercise Form&lt;/h2&gt;
            &lt;div className="form"&gt;
              &lt;div&gt;
                &lt;label&gt;Name of Exercise:&lt;/label&gt;
                &lt;input
                  name="exe_name"
                  type="text"
                  onChange={this.updateDetails.bind(this)}
                /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;label&gt;Exercise Info:&lt;/label&gt;
                &lt;input
                  name="exe_info"
                  type="text"
                  onChange={this.updateDetails.bind(this)}
                /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;label&gt;Exercise Url:&lt;/label&gt;
                &lt;input
                  name="exe_url"
                  type="text"
                  onChange={this.updateDetails.bind(this)}
                /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;label&gt;Exercise Url2:&lt;/label&gt;
                &lt;input
                  name="exe_url2"
                  type="text"
                  onChange={this.updateDetails.bind(this)}
                /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;label&gt;Comment:&lt;/label&gt;
                &lt;input
                  name="comment"
                  type="text"
                  onChange={this.updateDetails.bind(this)}
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;select name="plan_id" onChange={this.updateDetails.bind(this)}&gt;
              &lt;option&gt;Enter plan details&lt;/option&gt;
              {this.props.plans.map((plan, i) =&gt; {
                return &lt;option value={plan.plan_id}&gt;{plan.sets}&lt;/option&gt;;
              })}
            &lt;/select&gt;
            &lt;input className="submit" type="submit" value="Submit" /&gt;
          &lt;/form&gt;;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = ({ plans }) =&gt; {
    return { plans };
  };
  
  export default connect(mapStateToProps)(CreateExercise);
  </code></pre>
  
  <p>And here is the App component where it's being called.  </p>
  
  <pre><code>import React from "react";
  import { HashRouter as Router, Route } from "react-router-dom";
  import { connect } from "react-redux";
  import { getExercises } from "../actions/exercises";
  import { getPlansRequest } from "../actions/plansActions";
  import ExerciseList from "./ExerciseList";
  import Header from "./Header";
  import CreateExercise from "./CreateExercise";
  import Single from "./Single";
  import About from "./About";
  import Home from "./Home";
  import CreatePlan from "./CreatePlan";
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        showExerciseForm: false,
        showPlanForm: false,
      };
    }
  
    componentDidMount() {
      this.props.dispatch(getPlansRequest());
      this.props.dispatch(getExercises());
    }
  
    toggleForm(e) {
      this.setState({ [e.target.name]: !this.state[e.target.name] });
    }
  
    render() {
      return (
        &lt;Router&gt;
          &lt;div className="app-container"&gt;
            &lt;div className="sidebar pure-u-1 pure-u-md-1-4"&gt;
              &lt;Header /&gt;
            &lt;/div&gt;
            &lt;Route
              exact
              path="/"
              component={() =&gt; (
                &lt;button
                  name="showExerciseForm"
                  onClick={this.toggleForm.bind(this)}
                &gt;
                  {this.state.showExerciseForm ? "Cancel" : "Create Exercise"}
                &lt;/button&gt;
              )}
            /&gt;
  
            {this.state.showExerciseForm &amp;&amp; (
              &lt;Route exact path="/" component={CreateExercise} /&gt;
            )}
  
            &lt;Route
              exact
              path="/"
              component={() =&gt; (
                &lt;button name="showPlanForm" onClick={this.toggleForm.bind(this)}&gt;
                  {this.state.showPlanForm ? "Cancel" : "Create Plan"}
                &lt;/button&gt;
              )}
            /&gt;
            {this.state.showPlanForm &amp;&amp; (
              &lt;Route exact path="/" component={CreatePlan} /&gt;
            )}
  
            &lt;Route exact path="/exercises" component={ExerciseList} /&gt;
            &lt;Route
              exact
              path="/exercises/:id"
              component={props =&gt; &lt;Single {...props} /&gt;}
            /&gt;
            &lt;Route path="/about" component={About} /&gt;
            &lt;Route path="/" component={Home} /&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  export default connect()(App);
  </code></pre>