React dangerouslySetInnerHtml not working in certain conditions

Question

I am using dangerouslySetInnerHtml to insert links into a composite react component. The render method calls a method rowValue which checks the state of the component and returns the appropriate markup to be rendered.

This is the rowValue method:

rowValue: function() {
    var fieldValue;

    if(!this.state.isBeingEdited) {
        fieldValue = (
            <div dangerouslySetInnerHtml={{ __html: this.props.value }} />
        );
    } else {
        fieldValue = (
            <div className="col-sm-6 col-xs-6 js-field-wrapper">
                <input type="text"
                       defaultValue={this.extractUrl(this.props.value)}
                       className="form-control" />
            </div>
        );
    }

    return fieldValue;
},

On initial render the content of the div is empty:

<div class="col-sm-6 col-xs-6" data-reactid=".1.1.0.0.0.1.0.0.2.1:$angellist.0.1"></div>

But when the edit state of the component is set to true the input is properly populated with the correct value:

<div class="col-sm-6 col-xs-6 js-field-wrapper" data-reactid=".1.1.0.0.0.1.0.0.2.1:$angellist.0.1">
    <input type="text" class="form-control" value="https://example.com" data-reactid=".1.1.0.0.0.1.0.0.2.1:$angellist.0.1.0">
</div>

Setting the edit state back to false renders the empty div.

Wrapping the div with dangerouslySetInnerHtml prop inside another div does not change anything.

Answer 1

I couldn't figure out the exact conditions for why this was happening, but I found a workaround. For posterity's sake here it is:

I wanted to populate the div with a particular link. Instead of passing the string with the anchor tag to be set via dangerouslySetInnerHtml I just passed the URL and set the href attribute of an anchor tag.

  fieldValue = (
      <div className="col-sm-6 col-xs-6">
         <a href="{this.props.url}">{this.props.url}</a>
      </div>
    );