ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object

Question

I am getting the above error in the console, even though I'm correctly returning the Component to be rendered. Value of errorTexts = ["email is invalid"] in the following code

if(@state.errorTexts.length>0)
            dangerouslySetInnerHTML: {
              __html: ReactDOMServer.renderToString(
                React.createElement AdminError, errorTexts: @state.errorTexts
              )
            }

And the AdminError component contains the following piece of code:

#app/assets/javascripts/components/adminerror.js.coffee
@AdminError = React.createClass

  getDefaultProps: ->
    errorTexts: []

  render: ->
    for errorText in @props.errorTexts
      dom.div
        className: 'help-block'
        errorText

The JS equivalent of this component being:

(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 < len; i++) {
        errorText = ref[i];
        results.push(dom.div({
          className: 'help-block'
        }, errorText));
      }
      return results;
    }
  });

}).call(this);

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:

UPDATE: modified the code in AdminError component to fix this error

#app/assets/javascripts/components/adminerror.js.coffee
@AdminError = React.createClass

  getDefaultProps: ->
    errorTexts: []

  render: ->
    dangerouslySetInnerHTML: {
      __html: marked((
        dom.div null,
          for errorText, index in @props.errorTexts
            dom.div
              key: index
              className: 'help-block'
              errorText

      ).toString())
    }

and again got this error:

Uncaught Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.invariant

score 2 · Answer 1 · answered Mar 14 '16 at 14:40

2

React only accepts one parent element to be returned from render. From the code it look like you're returning several. Try this:

// your code ...
return (
   <div>
     {results}
   </div>
)

I'm not really sure what that would be in coffee script, but the basic idea is that you need to wrap your return in a single parent element.

answered Mar 14 '16 at 14:40

Jack

8,851
3
21
26

Even I am not sure about how to do it in coffee, let me try! – Vipin Verma Mar 14 '16 at 14:41
I had just fixed these two errors, and now they have again cropped up. `Warning: input is a void element tag and must not have children or use props.dangerouslySetInnerHTML.warning` `Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {dangerouslySetInnerHTML}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.` – Vipin Verma Mar 14 '16 at 14:53

score 1 · Accepted Answer · answered Mar 14 '16 at 14:41

1

render method cannot return multiple elements, it must return only one. So wrap the list in another DOM element:

render: ->
  dom.div null,
    for errorText in @props.errorTexts
      dom.div
        className: 'help-block'
        errorText

answered Mar 14 '16 at 14:41

Robert Pankowecki

696
6
16

That worked, but now got some other other in parent component which was working until now :( – Vipin Verma Mar 14 '16 at 14:48
I had just fixed these two errors, and now they have again cropped up. `Warning: input is a void element tag and must not have children or use props.dangerouslySetInnerHTML.warning` `Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {dangerouslySetInnerHTML}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.` – Vipin Verma Mar 14 '16 at 14:53

ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object

2 Answers2