title: How to bold specific text in a string in a React.js app
body: <p>I have a React.js app with a search bar which is similar to, i.e., Google. A user can type some text into an input field, and matching data is fetched and displayed in a dropdown menu below the input.</p>
  <p>My issue: I want to bold certain words that are shown in my dropdown - specifically the words in the string that the user has <strong>not</strong> typed into the input field themselves.</p>
  <p>So, for instance, if a user types in the search bar &quot;blue&quot;, below it will display all data in the DB which contains the word &quot;blue&quot; i.e. &quot;blue shoes&quot; or &quot;blue sky&quot;. I want it that the word that is <strong>not</strong> typed into the searchbar to be bolded --&gt; sky or shoes</p>
  <p>My makeBold function does not work because a) it displays on the browser as <code>&lt;b&gt;blue&lt;/b&gt; sky</code> rather than actually bolded; b) it would bold the keyword the user typed in rather than the other words)</p>
  <p>** <code>keyword</code> is passed to this component by the parent, it contains the text
  the user has written in the input field</p>
  <p>** <code>searchResults</code> contains the list of fetched search results passed as an
  array of objects</p>
  <pre><code>const SearchResults = ({ keyword, searchResults }) =&gt; {
    
     const showDropdown = () =&gt; {
      return searchResults.map((item) =&gt; {
        if (item.term.includes(keyword.toLowerCase())) {
          return (
            &lt;div key={item.term}&gt;
              &lt;ul&gt;
                &lt;li className=&quot;input-fields search-results&quot;&gt;
                  {makeBold(item.searchterm)} ({item.nrResults})
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          );
        }
      });
    };
  
    const makeBold = (input) =&gt; {
        var re = new RegExp(keyword, 'g')
        return (
            input.replace(re, '&lt;b&gt;'+keyword+ '&lt;/b&gt;')
        )
    }
  
    return &lt;div&gt;{keyword ? showDropdown () : null}&lt;/div&gt;;
  };
  </code></pre>
  <p>So my question is how to bold specific text in my string which has <strong>not</strong> typed into the input field?
  Thanks!</p>