title: Uncaught Error: Invariant Violation: Element type is invalid: expected a string
body: <ul>
  <li>i am trying to debug my react code.</li>
  <li>in my render method I try to put debugger and debugger.</li>
  <li>after I step over retun method its going to warning.js.</li>
  <li>after I step over warning.js if conditions its going to instantiateReactComponent.js</li>
  <li>I am not sure why its going to different files. can you tell me why its going to different files.</li>
  <li>not sure how to debug.</li>
  <li>it would be great if you guys give me some explaination so that in future I can fix the error my self</li>
  <li><p>providing the snippet of the code where it goes in step over function call each time</p>
  
  <p>error 
  invariant.js?f23e:39 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of <code>sports-container</code>.</p>
  
  <p>render() {
          const { sportsType, sportsDevice, sportsWordings, id } = this.props;
          let sportsEvent = true;</p>
  
  <pre><code>    debugger;
  
      if (sportsEvent === true) {
          return (
  </code></pre>
  
  <p>warning.js</p></li>
  </ul>
  
  <p>/**
   * Similar to invariant but only logs a warning if the condition is not met.
   * This can be used to log issues in development environments in critical
   * paths. Removing the logging code for production environments will keep the
   * same logic and follow the same code paths.
   */</p>
  
  <pre><code>var warning = emptyFunction;
  
  if (process.env.NODE_ENV !== 'production') {
    warning = function (condition, format) {
      for (var _len = arguments.length, args = Array(_len &gt; 2 ? _len - 2 : 0), _key = 2; _key &lt; _len; _key++) {
        args[_key - 2] = arguments[_key];
      }
  
      if (format === undefined) {
        throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
      }
  
      if (format.indexOf('Failed Composite propType: ') === 0) {
        return; // Ignore CompositeComponent proptype check.
      }
  
      if (!condition) {
        var argIndex = 0;
        var message = 'Warning: ' + format.replace(/%s/g, function () {
          return args[argIndex++];
        });
        if (typeof console !== 'undefined') {
          console.error(message);
        }
        try {
          // --- Welcome to debugging React ---
          // This error was thrown as a convenience so that you can use this stack
          // to find the callsite that caused this warning to fire.
          throw new Error(message);
        } catch (x) {}
      }
    };
  }
  
  instantiateReactComponent
  
    instance.construct(node);
  </code></pre>
  
  <p>/**
   * Given a ReactNode, create an instance that will actually be mounted.
   *
   * @param {ReactNode} node
   * @return {object} A new instance of the element's constructor.
   * @protected
   */</p>
  
  <pre><code>function instantiateReactComponent(node) {
    var instance;
  
    if (node === null || node === false) {
      instance = new ReactEmptyComponent(instantiateReactComponent);
    } else if (typeof node === 'object') {
      var element = node;
      !(element &amp;&amp; (typeof element.type === 'function' || typeof element.type === 'string')) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Element type is invalid: expected a string (for built-in components) ' + 'or a class/function (for composite components) but got: %s.%s', element.type == null ? element.type : typeof element.type, getDeclarationErrorAddendum(element._owner)) : invariant(false) : undefined;
  
      // Special case string values
      if (typeof element.type === 'string') {
        instance = ReactNativeComponent.createInternalComponent(element);
      } else if (isInternalComponentType(element.type)) {
        // This is temporarily available for custom components that are not string
        // representations. I.e. ART. Once those are updated to use the string
        // representation, we can drop this code path.
        instance = new element.type(element);
      } else {
        instance = new ReactCompositeComponentWrapper();
      }
    } else if (typeof node === 'string' || typeof node === 'number') {
      instance = ReactNativeComponent.createInstanceForText(node);
    } else {
      !false ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Encountered invalid React node of type %s', typeof node) : invariant(false) : undefined;
    }
  
    if (process.env.NODE_ENV !== 'production') {
      process.env.NODE_ENV !== 'production' ? warning(typeof instance.construct === 'function' &amp;&amp; typeof instance.mountComponent === 'function' &amp;&amp; typeof instance.receiveComponent === 'function' &amp;&amp; typeof instance.unmountComponent === 'function', 'Only React Components can be mounted.') : undefined;
    }
  
    // Sets up the instance. This can probably just move into the constructor now.
    instance.construct(node);
  </code></pre>