Warning: the input is a void element tag and must not have `children` or use` props.dangerouslySetInnerHTML`. Check null rendering method

Question

I am trying to display errors on the form if the ajax call to the form url fails. Below is my Admin component:

 #app/assets/javascripts/components/admin.js.coffee @Admin = React.createClass # propTypes: -> # emailVal: React.PropTypes.string.isRequired getInitialState: -> edit: false errorTexts: [] handleToggle: (e) -> e.preventDefault() @setState edit: !@state.edit @setState errorTexts: [] handleDelete: (e) -> e.preventDefault() # yeah... jQuery doesn't have a $.delete shortcut method $.ajax method: 'DELETE' url: "/admins/#{ @props.admin.id }" dataType: 'JSON' success: () => @props.handleDeleteAdmin @props.admins handleEdit: (e) -> e.preventDefault() data = email: ReactDOM.findDOMNode(@refs.email).value # jQuery doesn't have a $.put shortcut method either $.ajax method: 'PUT' async: false url: "/admins/#{ @props.admin.id }" dataType: 'JSON' data: admin: data error: (data, status, xhr) => errorTexts = [] for key, value of data.responseJSON errorText = "#{key} #{value.toString()}" errorTexts.push errorText @replaceState errorTexts: errorTexts @setState edit: true success: (data, status, xhr) => @setState edit: false @props.handleEditAdmin @props.admin, data adminRow: -> 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: -> 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: -> if @state.edit @adminForm() else @adminRow() 

AdminError component component:

 #app/assets/javascripts/components/adminerror.js.coffee @AdminError = React.createClass getDefaultProps: -> errorText: "" render: -> dom.div className: 'help-block' @props.errorText 

During debugging, I get the correct @ props.errorText value as "email address is not valid." But it does not appear on the page, and I collect this warning in the console: "Warning: input is a void element tag and should not have children or use props.dangerouslySetInnerHTML . Check the null rendering method." A screenshot of both the error and the page is attached.

I tried changing the AdminError component as follows, but this did not work:

 #app/assets/javascripts/components/adminerror.js.coffee @AdminError = React.createClass getDefaultProps: -> errorText: "" render: -> dom.div className: 'help-block' dangerouslySetInnerHTML: __html: marked(@props.errorText.toString(), {saitize: true}) 

When I set a debug point on a line that returns a dangerous SetInnerHTML, I correctly get the value @props.errorText , because "the message is invalid", and the value marked(@props.errorText.toString()) , because "

invalid

". but still the help box for the error is not displayed at all.

UPDATE: Made the following changes to the AdminError component

Application / assets / JavaScripts / components / adminerror.js.coffee

 @AdminError = React.createClass getDefaultProps: -> # errorText: "" errorTexts: [] render: -> for errorText in @props.errorTexts dom.div className: 'help-block' errorText 

and the following changes have been made to the administration method in the Admin component:

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

does not receive the warning anymore, but instead receives the following error:

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

Answer 1

Warning: input is a void element tag and should not have children ...

A dom.input may not have children.

But this code tries to display error messages as children of dom.input :

  dom.td null, dom.input className: 'form-control' type: 'text' defaultValue: @props.admin.email ref: 'email' # These are being rendered as children of the input: for errorText, index in @state.errorTexts React.createElement AdminError, key: index, errorText: errorText 

Can you send these error messages to another location? For example, as siblings input:

  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