title: How do I style part of my searched word in React.js, to bold or lighter, for instance?
body: <p>I have found a few closely related questions, but not so close enough. I am trying to style only the searched part of the search result. For example, if the query is <strong>&quot;Thi&quot;,</strong> I want the result to appear as Thi<strong>ngs fall apart</strong>. My problem is it renders <strong>[object Object]</strong> right inside the browser. How do I make it render the desired text and so I can freely style it with CSS3? The other problem I have is a warning in the browser console that</p>
  <pre><code>index.js:1 Warning: Each child in a list should have a unique &quot;key&quot; prop.
  </code></pre>
  <p>Code below:</p>
  <pre><code>import React, { Fragment } from &quot;react&quot;;
  import CancelIcon from &quot;@material-ui/icons/Cancel&quot;;
  import CallMadeIcon from &quot;@material-ui/icons/CallMade&quot;;
  
  export default function SearchBar(props) {
    return (
      &lt;Fragment&gt;
        &lt;div className=&quot;search&quot;&gt;
          &lt;div
            className=&quot;search-input-container&quot;
            ref={props.searchInputContainerRef}
          &gt;
            &lt;label htmlFor=&quot;search-input&quot;&gt;&lt;/label&gt;
            &lt;input
              type=&quot;text&quot;
              id=&quot;search-input&quot;
              placeholder={props.placeholder}
              onChange={props.handleSetSearchTerm}
              value={props.searchTerm}
              ref={props.searchInputRef}
              onFocus={props.blurAllOnSearch}
              onBlur={props.blurAllOnSearch}
              onKeyUp={props.handleFilter}
            /&gt;
            {props.searchTerm === &quot;&quot; ? (
              &lt;button
                ref={props.searchIconVectorRef}
                type=&quot;button&quot;
                className=&quot;search-icon-btn&quot;
                onClick={props.focusSearchInput}
              &gt;&lt;/button&gt;
            ) : (
              &lt;CancelIcon
                className=&quot;clear-btn&quot;
                type=&quot;button&quot;
                onClick={props.clearSearchInput}
              /&gt;
            )}
            &lt;button className=&quot;go-search-btn&quot;&gt;Go&lt;/button&gt;
          &lt;/div&gt;
          {props.searchResults.length !== 0 &amp;&amp; (
            &lt;div className=&quot;search-results&quot;&gt;
              {props.searchResults.slice(0, 15).map((value, key) =&gt; {
                const boldResultPart = (result, query) =&gt; {
                  let re = new RegExp(query, &quot;ig&quot;);
                  return result
                    .replace(/- /g, &quot;&quot;)
                    .replace(/\./g, &quot;&quot;)
                    .replace(re, &lt;span className=&quot;boldFont&quot;&gt; ${query} &lt;/span&gt;); // &lt;-- *My problem is this span renders as [object Object] in the browser*
                };
  
                let bolded = boldResultPart(value.title, props.searchTerm);
  
                return (
                  &lt;li className=&quot;data-item&quot;&gt;
                    &lt;a
                      className=&quot;result&quot;
                      href={value.link}
                      target=&quot;_blank&quot;
                      rel=&quot;noreferrer&quot;
                    &gt;
                      {bolded}
                    &lt;/a&gt;
                    &lt;CallMadeIcon className=&quot;call-made-icon&quot; /&gt;
                  &lt;/li&gt;
                );
              })}
            &lt;/div&gt;
          )}
        &lt;/div&gt;
      &lt;/Fragment&gt;
    );
  }
  
  </code></pre>