Uncaught Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned

Question

Inside the render method of react, I am trying to render some children on the basis of state variable. Quoted below is the piece of code for the same:

  render: ->
    if @state.edit
      @adminForm()
    else
      @adminRow()
    if @state.showModal
      React.createElement AdminDeleteModal, email: @props.admin.email, handleOK: @handleDelete, handleCancelDelete: @hidePopUpModal

This is leading me to an error: "Uncaught Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object."

But, when I shift this rendering part of the AdminDeleteModal to the end of the @adminRow() method it works:

  adminRow: ->
    dom.tr
      className: 'row'
      dom.td
        className: "col-md-6"
        @props.admin.email
      dom.td
        className: "col-md-6 text-right"
        dom.a
          className: 'glyphicon glyphicon-edit text-primary'
          onClick: @handleToggle
        dom.a
          className: 'glyphicon glyphicon-trash text-danger deletethis'
          data: { title: 'Delete Admin?' ,confirm: "Are you sure you want to delete User #{@props.admin.email}?"}
          onClick: @showPopUpModal
      if @state.showModal
        React.createElement AdminDeleteModal, email: @props.admin.email, handleOK: @handleDelete, handleCancelDelete: @hidePopUpModal

Although, this gives rise to another problem of having div inside tr, leading to the following warning:

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>. See (unknown) > tr > (unknown) > div.

UPDATE: Updated the code with the suggestions below

  render: ->
    if @state.edit
      @adminForm()
    else
      @adminRow()
    if @state.showModal
      dom.tr null,
        dom.td null,
          React.createElement AdminDeleteModal, email: @props.admin.email, handleOK: @handleDelete, handleCancelDelete: @hidePopUpModal

Also you need a `` inside of a `tr` not `div` put the div inside of the `td` — Train, Mar 18 '16 at 14:10
yes, that worked without error, indentation problem in coffeescript. But how do I proceed for the first one, I encounter such problems often. — Vipin Verma, Mar 18 '16 at 14:25
It looks like you are just returning a `tr` without the proper parent element. Am I wrong? — Train, Mar 18 '16 at 14:29
looks like you were correct, I added the tr+td as parent. But, still it didn't work for me. — Vipin Verma, Mar 18 '16 at 14:40
What is the parent of the `tr` is it a `tbody` or a `table`? — Train, Mar 18 '16 at 15:20
Igues, it would be rendered properly, but that's not what I want. let me check once! — Vipin Verma, Mar 20 '16 at 09:02
Strange thing happens when I move it out of the condition. the first two conditions doesn't seem to work. Neither @adminForm() nor the @adminRow is rendered. Only AdminDeleteModal is rendered — Vipin Verma, Mar 21 '16 at 04:48
Seems like there can be only one if else if ladder inside the render statement, otherwise it won't work. — Vipin Verma, Mar 21 '16 at 04:50
Did you fix your problem? What happens when you abstract the first conditional in your render to a function call? — Train, Mar 21 '16 at 13:10
I couldn't fix the problem, used some workaround. But still I'd like to know the solution to this problem — Vipin Verma, Mar 21 '16 at 13:58

Uncaught Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned

0 Answers0