title: Warning: input is a void element tag and must not have `children` or use `props.dangerouslySetInnerHTML`. Check the render method of null
body: <p>I am trying to render the errors in the form if the ajax call to the form URL fails. Below is my <code>Admin</code> component:</p>
  <pre><code>#app/assets/javascripts/components/admin.js.coffee
  @Admin = React.createClass
  #  propTypes: -&gt;
  #    emailVal: React.PropTypes.string.isRequired
  
    getInitialState: -&gt;
      edit: false
      errorTexts: []
  
    handleToggle: (e) -&gt;
      e.preventDefault()
      @setState edit: !@state.edit
      @setState errorTexts: []
  
    handleDelete: (e) -&gt;
      e.preventDefault()
      # yeah... jQuery doesn't have a $.delete shortcut method
      $.ajax
        method: 'DELETE'
        url: &quot;/admins/#{ @props.admin.id }&quot;
        dataType: 'JSON'
        success: () =&gt;
          @props.handleDeleteAdmin @props.admins
  
    handleEdit: (e) -&gt;
      e.preventDefault()
      data = email: ReactDOM.findDOMNode(@refs.email).value
      # jQuery doesn't have a $.put shortcut method either
      $.ajax
        method: 'PUT'
        async: false
        url: &quot;/admins/#{ @props.admin.id }&quot;
        dataType: 'JSON'
        data:
          admin: data
        error: (data, status, xhr) =&gt;
          errorTexts = []
          for key, value of data.responseJSON
            errorText = &quot;#{key} #{value.toString()}&quot;
            errorTexts.push errorText
          @replaceState errorTexts: errorTexts
          @setState edit: true
        success: (data, status, xhr) =&gt;
          @setState edit: false
          @props.handleEditAdmin @props.admin, data
  
    adminRow: -&gt;
      dom.tr null,
        dom.td null, @props.admin.email
        dom.td null,
          dom.a
            className: 'btn btn-default'
            onClick: @handleToggle
            'Edit'
          dom.a
            className: 'btn btn-danger'
            onClick: @handleDelete
            'Delete'
  
    adminForm: -&gt;
      dom.tr null,
        dom.td null,
          dom.input
            className: 'form-control'
            type: 'text'
            defaultValue: @props.admin.email
            ref: 'email'
            for errorText, index in @state.errorTexts
              React.createElement AdminError, key: index, errorText: errorText
        dom.td null,
          dom.a
            className: 'btn btn-default'
            onClick: @handleEdit
            'Update'
          dom.a
            className: 'btn btn-danger'
            onClick: @handleToggle
            'Cancel'
  
    render: -&gt;
      if @state.edit
        @adminForm()
      else
        @adminRow()
  </code></pre>
  <p>The corressponding <code>AdminError</code> component is:</p>
  <pre><code>#app/assets/javascripts/components/adminerror.js.coffee
  @AdminError = React.createClass
  
    getDefaultProps: -&gt;
      errorText: &quot;&quot;
  
    render: -&gt;
      dom.div
        className: 'help-block'
        @props.errorText
  </code></pre>
  <p>While debugging I am getting the correct value of @props.errorText as &quot;email is invalid&quot;. But it is not getting rendered on the page and I am geeting this warning in console: &quot;Warning: input is a void element tag and must not have <code>children</code> or use <code>props.dangerouslySetInnerHTML</code>. Check the render method of null.&quot;
  Attached is the screenshot of both the error and the page.
  <a href="https://i.stack.imgur.com/PWJHE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/PWJHE.png" alt="enter image description here" /></a><a href="https://i.stack.imgur.com/PUzoY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/PUzoY.png" alt="enter image description here" /></a></p>
  <p>I tried changing the AdminError component as follows, but it didn't work:</p>
  <pre><code>#app/assets/javascripts/components/adminerror.js.coffee
  @AdminError = React.createClass
  
    getDefaultProps: -&gt;
      errorText: &quot;&quot;
  
    render: -&gt;
      dom.div
        className: 'help-block'
        dangerouslySetInnerHTML: __html: marked(@props.errorText.toString(), {saitize: true})
  </code></pre>
  <p>When I set a debug point at the line returning dangerouslySetInnerHTML, I correctly get the value of <code>@props.errorText</code> as &quot;email is invalid&quot; and value of <code>marked(@props.errorText.toString())</code> as &quot;<p>email is invalid</p>&quot;.. but still the help-block for error is not rendered at all.</p>
  <p><strong>UPDATE:</strong>
  Made the following changes in the AdminError component</p>
  <h1>app/assets/javascripts/components/adminerror.js.coffee</h1>
  <pre><code>@AdminError = React.createClass
  
    getDefaultProps: -&gt;
  #    errorText: &quot;&quot;
      errorTexts: []
  
    render: -&gt;
      for errorText in @props.errorTexts
        dom.div
          className: 'help-block'
          errorText
  </code></pre>
  <p>and in the Admin component, made the following changes to the adminform method:</p>
  <pre><code>if(@state.errorTexts.length&gt;0)
              dangerouslySetInnerHTML: {
                __html: ReactDOMServer.renderToString(
    #              for errorText, index in @state.errorTexts
                  React.createElement AdminError, errorTexts: @state.errorTexts
                )
              }
  </code></pre>
  <p>not getting the warning anymore, but instead getting the following 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.
  </code></pre>