title: React.js - conditionally use dangerouslySetInnerHTML
body: <p>I have some code to Regex some text and wrap it in a <code>&lt;span /&gt;</code> like so:</p>
  
  <pre><code>highlightQuery() {
      // will output the text response from the Model, but also highlight relevant words if they match the search query
      // that the user input
      let input = this.props.model.get('value');
  
      if(!this.state.hasMatch){
          return input;
      }
  
      let query = this.props.matched.query,
          index = this.props.model.get('searchIndexes')[this.props.matched.index];
  
      const replaceBetween = (str, start, end, what) =&gt; {
          return str.substring(0, start) + what + str.substring(start + end);
      };
  
      let ret = replaceBetween(input, index, query.length, `&lt;span class='highlighted'&gt;${query}&lt;/span&gt;`);
  
      return ret;
  },
  
  render() {
  
      const classes = classNames(
          this.props.model.get('type'),
          'character'
      );
  
      return (
          &lt;span key={this.props.model.cid} className={classes} dangerouslySetInnerHTML={ {__html: this.highlightQuery()} }&gt;
              {!this.state.hasMatch &amp;&amp; this.highlightQuery()}
          &lt;/span&gt;
      );
  }
  </code></pre>
  
  <p>However, this yields: <code>Uncaught Error: Invariant Violation: Can only set one of children or props.dangerouslySetInnerHTML.</code></p>
  
  <p>How am I best to conditionally use <code>dangerouslySetInnerHTML</code>?</p>