Добавление тега <strong>к набранным буквам в поле автозаполнения в React

Question

Я все еще изучаю React и выполняю небольшие упражнения, чтобы улучшить свои навыки. это может показаться легким, но я застрял на этом. Как написано в заголовке, как добавить тег <strong> к набранным буквам, чтобы сделать их жирным в поле автозаполнения?

Вот моя ближайшая рабочая попытка:

import React, { useState } from "react";
import suggestionsArray from "./suggestionsArray"; // just an array with country names

const App = () => {
  const [inputValue, setInputValue] = useState("");
  const [matches, setMatches] = useState([]);

  const handleChange = e => {
    const { value } = e.target;

    if (value.length > 0) {
      const matchList = suggestionsArray.filter(
        item => item.toLowerCase().indexOf(value.toLowerCase()) === 0
      );
    } else {
      setMatches([]);
    }
    setInputValue(value);
  };

  return (
    <div className="App">
      <div className="suggestions">
        <input
          placeholder="Country"
          value={inputValue}
          name="suggestionsInput"
          type="search"
          onChange={handleChange}
        />
        <div>
          <ul className="suggestionList">
            {matches.map(item => {
              const regex = new RegExp(inputValue, "i");
              const letter = item.replace(
                regex,
                `<strong>${inputValue}</strong>`
              );
              return (
                <li key={item}>
                  <strong>{letter}</strong>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </div>
  );
};

Как вы уже догадались, это вроде работает, но вывод печатается "как есть" как HTML Метка:

<strong>d</strong>enmark

Где предполагается, что d enmark

Codesandbox ссылка

Любая помощь будет высоко ценится!

Answer 1

Использование dangerouslySetInner HTML Это как замена React для innerHTML

Просто замените карту return

...
const letter = item.replace(regex, `<strong>${inputValue}</strong>`);
   return <li key={item}>{letter}</li>;
...

С:

...
const letter = item.replace(regex, `<strong>${inputValue}</strong>`)
   return (
     <li key={item}>
       <span dangerouslySetInnerHTML={{ __html: letter }} />
     </li>
   )
...

Вот пример codeSanbox .