title: reactJS - TypeError: Cannot call a class as a function
body: <p>i am making react app in which i am using react router now here i have 4 links /dashboard  /add  /help /edit/:id<code>. whenever i go to</code>/add i am getting error.check out code given below.</p>
  
  <pre><code> import React from 'react';
  import { connect } from 'react-redux';
  import PostsForm from './PostsForm';
  import { AddPost } from '../actions/posts';
  
  const Add = (props) =&gt; (
    &lt;div&gt;
      &lt;h1&gt;Add Expense&lt;/h1&gt;
      &lt;PostsForm
        onSubmit={(post) =&gt; {
          props.dispatch(AddPost(post));
          props.history.push('/');
        }}
      /&gt;
    &lt;/div&gt;
  );
  
  export default connect()(Add);
  </code></pre>
  
  <p>I am getting this error when i go to <code>/add</code>. here you can see that i am 3 errors
  first i think related to <code>connect()</code> function and second i related to route and third is identical to <code>connect()</code></p>
  
  <pre><code>Uncaught TypeError: Cannot call a class as a function
  at _classCallCheck (connectAdvanced.js:3)
  at Connect (connectAdvanced.js:106)
  at Route.render (Route.js:104)
  at finishClassComponent (react-dom.development.js:8389)
  at updateClassComponent (react-dom.development.js:8357)
  at beginWork (react-dom.development.js:8982)
  at performUnitOfWork (react-dom.development.js:11814)
  at workLoop (react-dom.development.js:11843)
  at HTMLUnknownElement.callCallback (react-dom.development.js:100)
  at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
  at invokeGuardedCallback (react-dom.development.js:187)
  at replayUnitOfWork (react-dom.development.js:11318)
  at renderRoot (react-dom.development.js:11885)
  at performWorkOnRoot (react-dom.development.js:12449)
  at performWork (react-dom.development.js:12370)
  at performSyncWork (react-dom.development.js:12347)
  at interactiveUpdates (react-dom.development.js:12597)
  at interactiveUpdates (react-dom.development.js:1958)
  at dispatchInteractiveEvent (react-dom.development.js:4259)
  index.js:2178 The above error occurred in the &lt;Route&gt; component:
    in Route (at AppRouter.js:20)
    in Switch (at AppRouter.js:17)
    in div (at AppRouter.js:15)
    in Router (created by BrowserRouter)
    in BrowserRouter (at AppRouter.js:14)
    in AppRouter (at index.js:34)
    in Provider (at index.js:33)
  
  Consider adding an error boundary to your tree to customize error handling behavior.
  Visit fb.me/react-error-boundaries to learn more about error" boundaries.
  __stack_frame_overlay_proxy_console__ @ index.js:2178
  react-dom.development.js:12431 Uncaught TypeError: Cannot call a class as a function
      at _classCallCheck (connectAdvanced.js:3)
      at Connect (connectAdvanced.js:106)
      at Route.render (Route.js:104)
      at finishClassComponent (react-dom.development.js:8389)
      at updateClassComponent (react-dom.development.js:8357)
      at beginWork (react-dom.development.js:8982)
      at performUnitOfWork (react-dom.development.js:11814)
      at workLoop (react-dom.development.js:11843)
      at renderRoot (react-dom.development.js:11874)
      at performWorkOnRoot (react-dom.development.js:12449)
      at performWork (react-dom.development.js:12370)
      at performSyncWork (react-dom.development.js:12347)
      at interactiveUpdates (react-dom.development.js:12597)
      at interactiveUpdates (react-dom.development.js:1958)
      at dispatchInteractiveEvent (react-dom.development.js:4259)
  </code></pre>
  
  <p>Here is the code of PostsForm</p>
  
  <pre><code>import React from "react";
  import moment from "moment";
  
  import { SingleDatePicker } from "react-dates";
  import "react-dates/initialize";
  import "react-dates/lib/css/_datepicker.css";
  
  export default class PostsForm extends React.Component {
    state = {
      title: "",
      post: "",
      date: moment(),
      focused: false,
      error: ""
    };
  
    onTitle = e =&gt; {
      var title = e.target.value;
  
      this.setState(() =&gt; {
        return {
          title
        };
      });
    };
  
    onPost = e =&gt; {
      var post = e.target.value;
  
      this.setState(() =&gt; {
        return {
          post
        };
      });
    };
  
    onDate = date =&gt; this.setState({ date });
  
    onFocus = ({ focused }) =&gt; this.setState({ focused });
  
    onSubmit = e =&gt; {
      e.preventDefault();
  
      if (this.state.title === "" &amp;&amp; this.state.post === "") {
        this.setState(() =&gt; ({
          error: "please fill on the blanks."
        }));
      } else {
        this.setState(() =&gt; ({
          error: ""
        }));
  
        this.props.onSubmit({
          title: this.state.title,
          post: this.state.post,
          date: this.state.date.valueOf()
        });
      }
    };
  
    render() {
      return (
        &lt;div&gt;
          {!this.state.error ? "" : this.state.error}
          &lt;form onSubmit={this.onSubmit}&gt;
            &lt;input
              type="text"
              placeholder="Title"
              onChange={this.onTitle}
              value={this.state.title}
            /&gt;
            &lt;SingleDatePicker
              date={this.state.date} // momentPropTypes.momentObj or null
              onDateChange={this.onDate} // PropTypes.func.isRequired
              focused={this.state.focused} // PropTypes.bool
              onFocusChange={this.onFocus} // PropTypes.func.isRequired
              numberOfMonths={1}
              isOutsideRange={() =&gt; false}
            /&gt;
            &lt;textarea
              placeholder="Type here"
              value={this.state.post}
              onChange={this.onPost}
            /&gt;
  
            &lt;button&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>