title: Element type invalid : expected string in react-transition-group
body: <p>As mentioned in this answer here : <a href="https://stackoverflow.com/questions/53628895/why-is-react-addons-css-transition-group-not-working-here">why is react-addons-css-transition-group not working here?</a> , I tried using the <code>react-transition-group</code> module but it gives the following error when I start react. How do I fix this ? </p>
  
  <pre><code>Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
  
  Check the render method of `TransitionGroup`.
      at invariant (invariant.js:41)
      at getFiberTagFromObjectType (react-dom.development.js:10173)
      at createFiberFromElement (react-dom.development.js:10130)
      at createChild (react-dom.development.js:12553)
      at reconcileChildrenArray (react-dom.development.js:12822)
      at reconcileChildFibers (react-dom.development.js:13164)
      at reconcileChildrenAtExpirationTime (react-dom.development.js:13551)
      at reconcileChildren (react-dom.development.js:13542)
      at updateHostComponent (react-dom.development.js:13885)
      at beginWork (react-dom.development.js:14390)
      at performUnitOfWork (react-dom.development.js:16627)
      at workLoop (react-dom.development.js:16667)
      at renderRoot (react-dom.development.js:16704)
      at performWorkOnRoot (react-dom.development.js:17352)
      at performWork (react-dom.development.js:17274)
      at performSyncWork (react-dom.development.js:17247)
      at requestWork (react-dom.development.js:17137)
      at scheduleWork$1 (react-dom.development.js:17000)
      at scheduleRootUpdate (react-dom.development.js:17594)
      at updateContainerAtExpirationTime (react-dom.development.js:17620)
      at updateContainer (react-dom.development.js:17651)
      at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17950)
      at react-dom.development.js:18104
      at unbatchedUpdates (react-dom.development.js:17483)
      at legacyRenderSubtreeIntoContainer (react-dom.development.js:18100)
      at Object.render (react-dom.development.js:18164)
      at Module../src/index.js (index.js:10)
      at __webpack_require__ (bootstrap:782)
      at fn (bootstrap:150)
      at Object.0 (RootStore.js:9)
      at __webpack_require__ (bootstrap:782)
      at checkDeferredModules (bootstrap:45)
      at Array.webpackJsonpCallback [as push] (bootstrap:32)
      at main.chunk.js:1
  
  
  The above error occurred in the &lt;span&gt; component:
      in span (created by TransitionGroup)
      in TransitionGroup (at VariableSelector.js:288)
      in div (at VariableSelector.js:282)
      in VariableDefinitions (created by Connect(VariableDefinitions))
      in Connect(VariableDefinitions) (at App.js:21)
      in App (created by Connect(App))
      in Connect(App) (at index.js:10)
      in Provider (at index.js:10)
  </code></pre>
  
  <blockquote>
    <p>Here is my React code :-</p>
  </blockquote>
  
  <pre><code>import { TransitionGroup, CSSTransition } from 'react-transition-group';
  class VariableDefinitions extends Component {
  
    render() {
      const { idToVarStates, addVariable, currentTab } = this.props;
  
  
      const varHtmlList = Object.keys(idToVarStates).map(id =&gt; {
        return (
  
          &lt;CSSTransition
            key={id}
            timeout={1000}
            classNames="fade"
          &gt;
            &lt;VariableDefine id={id} key={id} {...this.props} /&gt;
          &lt;/CSSTransition&gt;
  
        );
      })
  
  
      return (
        &lt;div style={{ display: currentTab === 'define' || "none" }}&gt;
  
          &lt;div className="text-center mt-4"&gt;
            &lt;h2&gt;Variables and Constraints&lt;/h2&gt;
          &lt;/div&gt;
  
          &lt;TransitionGroup className="todo-list"&gt;
            {varHtmlList}
          &lt;/TransitionGroup&gt;
  
          &lt;div className="text-center"&gt;
            &lt;div onClick={addVariable} className="btn btn-info btn-sm"&gt;
              &lt;i className="fa fa-plus"&gt;&lt;/i&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  
        &lt;/div&gt;);
    }
  }
  </code></pre>