title: How highlight part of the text React
body: <p>have a search query and result title. I want to highlight a words in title which corresponds search query</p>
  
  <pre><code>  function lightString(string, query) {
        return string.split(" ").map(item =&gt; item.toUpperCase() === query.toUpperCase() ? `&lt;span className='some-class'&gt;${item}&lt;span/&gt;` : item).join(" ");
    }
    let result = lightString(product.title, searchWords[0])
  
    &lt;div dangerouslySetInnerHTML={{__html: result}} /&gt;
  </code></pre>
  
  <p>But in result I have unwanted nestings: 
  <a href="https://i.stack.imgur.com/DkN9O.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>Maybe you have any ideas how realise it?
  Thank you in advance</p>