How do I style part of my searched word in React.js, to bold or lighter, for instance?

Question

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 "Thi", I want the result to appear as Things fall apart. My problem is it renders [object Object] 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

index.js:1 Warning: Each child in a list should have a unique "key" prop.

Code below:

import React, { Fragment } from "react";
import CancelIcon from "@material-ui/icons/Cancel";
import CallMadeIcon from "@material-ui/icons/CallMade";

export default function SearchBar(props) {
  return (
    <Fragment>
      <div className="search">
        <div
          className="search-input-container"
          ref={props.searchInputContainerRef}
        >
          <label htmlFor="search-input"></label>
          <input
            type="text"
            id="search-input"
            placeholder={props.placeholder}
            onChange={props.handleSetSearchTerm}
            value={props.searchTerm}
            ref={props.searchInputRef}
            onFocus={props.blurAllOnSearch}
            onBlur={props.blurAllOnSearch}
            onKeyUp={props.handleFilter}
          />
          {props.searchTerm === "" ? (
            <button
              ref={props.searchIconVectorRef}
              type="button"
              className="search-icon-btn"
              onClick={props.focusSearchInput}
            ></button>
          ) : (
            <CancelIcon
              className="clear-btn"
              type="button"
              onClick={props.clearSearchInput}
            />
          )}
          <button className="go-search-btn">Go</button>
        </div>
        {props.searchResults.length !== 0 && (
          <div className="search-results">
            {props.searchResults.slice(0, 15).map((value, key) => {
              const boldResultPart = (result, query) => {
                let re = new RegExp(query, "ig");
                return result
                  .replace(/- /g, "")
                  .replace(/\./g, "")
                  .replace(re, <span className="boldFont"> ${query} </span>); // <-- *My problem is this span renders as [object Object] in the browser*
              };

              let bolded = boldResultPart(value.title, props.searchTerm);

              return (
                <li className="data-item">
                  <a
                    className="result"
                    href={value.link}
                    target="_blank"
                    rel="noreferrer"
                  >
                    {bolded}
                  </a>
                  <CallMadeIcon className="call-made-icon" />
                </li>
              );
            })}
          </div>
        )}
      </div>
    </Fragment>
  );
}

I passed **searchResults** through props from a parent component, hence ```props.searchResults``` which is an array of strings that return from searching through the site data. — Klem Lloyd Mwenya, Aug 18 '21 at 01:29
What would be contents of those variables, would they be something like this https://codepen.io/garaxer/pen/VwbJLwB — Gary B, Aug 18 '21 at 01:48
Yes, something like that. But, I want the first letter to remain capitalized. I also have another warning in the browser console saying ```Warning: Each child in a list should have a unique "key" prop.``` Any idea what this would mean? — Klem Lloyd Mwenya, Aug 18 '21 at 02:02
I've changed my answer and codepen so that the first letter of the search is capitalised. — Gary B, Aug 18 '21 at 03:12

Gary B · Accepted Answer · 2021-08-19T06:44:14.783

1

Replace will convert your Span into a string. Try creating the Span from the results of your regex. Here is an example:

function SearchBar(props) {
  return <div>
     {props?.searchResults.length && (
        <div className="search-results">
            {props.searchResults.slice(0, 15).map(value => {
                const boldResultPart = (result, query) => {
                    let re = new RegExp(query, "ig");
                    let results = result.replace(/- /g, "")
                    .replace(/\./g, "")
                    .split(re);
                    return [results, [...(result.matchAll(re))].map(x => x[0])]
                };
                const [resultSplit, resultFind] = boldResultPart(value.title, props.searchTerm)
                const makeBold = (q) => <strong className="boldFont">{q}</strong>              
                const bolded = resultSplit.map((i,c) =>  c ? <span key={c}>{makeBold(resultFind[c-1])}{i}</span> : i);
          
                return (
                <li key={value.title} className="data-item">
                    <a
                    className="result"
                    href={value.link}
                    target="_blank"
                    rel="noreferrer"
                    >
                    {bolded}
                    </a>
                </li>
                );
            })}
        </div>
    )}
    </div>
      

}


const Container = () => {
    return <SearchBar     
        searchResults={[
            { title: '', link: '/fooa' },
  
            { title: 'A', link: '/fooa' },
            { title: 'Afoo', link: '/fooa' },
            { title: 'AfooA', link: '/fooa' },
            { title: 'Foobar', link: '/barbar' },
            { title: 'Foobar foo', link: '/barbar' },
            { title: 'Foobar Foo', link: '/barbar' },
            { title: 'Afoo A Foobar', link: '/barbar' },
        
        ]}
        searchTerm="foo"
      />
}

ReactDOM.render(

    <Container />,

    document.getElementById("root")

)

This returns:

A
Afoo
AfooA
Foobar
Foobar foo
Foobar Foo
Afoo A Foobar

edited Aug 19 '21 at 06:44

answered Aug 18 '21 at 01:35

Gary B

188
1
8

1

Thank you Gary for editing the answer. May I ask why you have decided to leave out ``` !== 0``` in line 1 of our answer.? Does ```props.searchResult``` translate to true in the case of this section of code? Please take note that in my code it stands for an empty array if there are no results coming through. I only want that particular div to render when they are search results coming through. – Klem Lloyd Mwenya Aug 18 '21 at 10:13
1

You should keep yours, I changed it to stop my environment with Typescript from throwing an error, This would suit your needs: `props?.searchResults.length &&` There is not a need for `!==0` as `[].length == false` already – Gary B Aug 18 '21 at 11:41
1

Okay, Gary! Hey, would you think of the best way and at which point to check if the searched word will be in the front of a particular search result, and if so, only then should the first letter be capitalized, otherwise leave the search term lower case if it falls inside a sentence? – Klem Lloyd Mwenya Aug 18 '21 at 12:24
If you only want the first one capitlized, but all the search term bolded you could do it this way: const bold = makeBold(props.searchTerm); const boldCaptilized = makeBold(makeCapital(props.searchTerm)); const getCapitilzedOrNot = (c,i) => (c && !i) ? boldCaptilized :bold; const bolded = resultSplit.map((i,c) => c ? {getCapitilzedOrNot(c,resultSplit[c-1])}{i} : i); – Gary B Aug 19 '21 at 00:48
What I would do is keep the capitalization of the original result. So if the result was 'Foo a Foo afoo' and the query was foo, cut out all the foo's found and put them back in bold. I've updated my code pen and answer to do this. https://codepen.io/garaxer/pen/VwbJLwB – Gary B Aug 19 '21 at 01:00
Hello, Gary! Awesome!! this works great. Only that I still am getting that key error ```index.js:1 Warning: Each child in a list should have a unique "key" prop.``` still and am made to believe that if it's not something to do with the way ```

Klem Lloyd Mwenya

Aug 19 '21 at 06:18

You're welcome, you have good questions and are patient and polite. You are right, it is the span. `` Should fix it. I've edited my answer – Gary B Aug 19 '21 at 06:43

1

Thank you, Gary, for the compliment and support. I am a Computer Science Student at the University of the People and also on a Google Africa Developers Scholarship with Andela Google and Pluralsight. I am pursuing a paid internship anywhere as a Remote Software Developer. Could you know anyone that might want to add me to their team? I would be glad to be recommended! – Klem Lloyd Mwenya Aug 19 '21 at 07:26

1

Hi, Gary! I would like to implement navigation with keyboard arrow keys **Up (keyCode 38)** and Down **key code 40** through the list items and be able to initiate the selected link with the Enter **key code 13** How do I integrate this code into the answer above? ```if (event.keyCode === 38 && cursorPosition > 0) { setCursorPosition(cursorPosition - 1); console.log("up"); } else if ( event.keyCode === 40 && cursorPosition < searchResults.length - 1 ) { setCursorPosition(cursorPosition + 1); console.log("down"); }``` – Klem Lloyd Mwenya Aug 20 '21 at 13:08

Hello Klem, If you have focus on a link, hitting 'Enter' will be default open that link. You will want to set focus to the links using a ref https://reactjs.org/docs/hooks-reference.html#useref . You will need a new state variable keeps track of your current focus and use that to reference your list of refs. This may help: https://stackoverflow.com/questions/57810378/how-to-create-dynamic-refs-in-functional-component-using-useref-hook https://stackoverflow.com/questions/55565444/how-to-register-event-with-useeffect-hooks If you get really stuck ask a new question and link it here. – Gary B Aug 22 '21 at 00:29

How do I style part of my searched word in React.js, to bold or lighter, for instance?

1 Answers1

This returns: