title: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object
body: <p>I am getting the above error in the console, even though I'm correctly returning the Component to be rendered.
  Value of <code>errorTexts = ["email is invalid"]</code> in the following code</p>
  
  <pre><code>if(@state.errorTexts.length&gt;0)
              dangerouslySetInnerHTML: {
                __html: ReactDOMServer.renderToString(
                  React.createElement AdminError, errorTexts: @state.errorTexts
                )
              }
  </code></pre>
  
  <p>And the AdminError component contains the following piece of code:</p>
  
  <pre><code>#app/assets/javascripts/components/adminerror.js.coffee
  @AdminError = React.createClass
  
    getDefaultProps: -&gt;
      errorTexts: []
  
    render: -&gt;
      for errorText in @props.errorTexts
        dom.div
          className: 'help-block'
          errorText
  </code></pre>
  
  <p>The JS equivalent of this component being:</p>
  
  <pre><code>(function() {
    this.AdminError = React.createClass({
      getDefaultProps: function() {
        return {
          errorTexts: []
        };
      },
      render: function() {
        var errorText, i, len, ref, results;
        ref = this.props.errorTexts;
        results = [];
        for (i = 0, len = ref.length; i &lt; len; i++) {
          errorText = ref[i];
          results.push(dom.div({
            className: 'help-block'
          }, errorText));
        }
        return results;
      }
    });
  
  }).call(this);
  </code></pre>
  
  <p>The value of result returned from the AdminError component is show in the screenshot below, however, I am not sure if the type of object returned is acceptable or not as it is inside the for loop:
  <a href="https://i.stack.imgur.com/eZDBh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eZDBh.png" alt="enter image description here"></a></p>
  
  <p><strong>UPDATE:</strong>
  modified the code in AdminError component to fix this <a href="https://stackoverflow.com/questions/35956483/warning-input-is-a-void-element-tag-and-must-not-have-children-or-use-props/35991062#35991062">error</a></p>
  
  <pre><code>#app/assets/javascripts/components/adminerror.js.coffee
  @AdminError = React.createClass
  
    getDefaultProps: -&gt;
      errorTexts: []
  
    render: -&gt;
      dangerouslySetInnerHTML: {
        __html: marked((
          dom.div null,
            for errorText, index in @props.errorTexts
              dom.div
                key: index
                className: 'help-block'
                errorText
  
        ).toString())
      }
  </code></pre>
  
  <p>and again got this error:</p>
  
  <pre><code>Uncaught Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.invariant
  </code></pre>