title: React JSX - make substring in bold
body: <p>While creating custom autocomplete component I stuck with this problem: I got a string and substring(first part of the string, the one that user enters in autocompete field), and I need to show that part in bold in results list. </p>
  
  <p>But I cannot use <code>str.replace</code> like</p>
  
  <pre><code>    var re = new RegExp(find, 'g');
      return str.replace(re, '&lt;b&gt;'+find+'&lt;/b&gt;');
  </code></pre>
  
  <p>because it will return string and I need JSX. </p>
  
  <p>So basically the problem is - I have JSX and I need to make some part of it in bold. I need a function that takes JSX and like inject <code>&lt;b&gt;</code> tag in it in special places</p>
  
  <p>This is what I got so far</p>
  
  <pre><code>    boldJSX(str, find){
          if(!find) return str;
          return &lt;span&gt;&lt;b&gt;{find}&lt;/b&gt;{str.slice(find.length)}&lt;/span&gt;
      }
  </code></pre>