Can only set one of `children` or `props.dangerouslySetInnerHTML`

This happens because dangerouslySetInnerHTML can only be applied to one element. In your case, <Alert/> is a complex element made up of multiple children. That being said, the BS Alert component does accept HTML:

<Alert bsStyle="warning">
  <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</Alert>

or

<Alert bsStyle="warning">
  <span dangerouslySetInnerHTML={alertContent(alert)} />
</Alert>

you have to close the html tag short hand if there aren't inner HTML

<Alert dang...={} />

instead <Alert></Alert>

Solution, You have to make a separate component to render element in which you are using dangerously set.....

For Example:

const RenderHTML = (props) => (<span dangerouslySetInnerHTML={{__html:props.HTML}}></span>)



YourData.map((d,i) => {
    return <RenderHTML  HTML={d.YOUR_HTML} />
})

I had this error message in a react application.

My issue was I had code as below

<p dangerouslySetInnerHTML={{ __html:stringContainingHtml}}> </p>

My issue was the space in the <p> </p> tags - since html gets injected inside these tags the space was causing an issue as it wasn't empty.

Hope this might help some people.