Как правильно вывести строку в jsx с содержимым regex?

Question

[baroman4ik]

Пробовал обернуть текст, подходящий под условие regex в тег и вывести его в но если использую react-html-parser выводит [object Object] когда передаю text.replace(/#([^ ]+)/g, ReactHtmlParser(#$1)).
Если передаю без ReactHtmlParser то возвращает span не как тег с содержимым regex, а как строку. Как вернуть span как тег с содержимым regex? Заранее спасибо)
Полный код выглябит так:

function TextArea({text, note, setText}) {
  return (
      <div className="note-container">
        <textarea 
          className="note-body" 
          onChange={e => {
            setText(e.target.value)
          }}
          placeholder='Choose this text...'
          rows={10}
          defaultValue={note.text || ''}
        > 
        </textarea>
        <p className="note-body">{text.replace(/#([^ ]+)/g, ReactHtmlParser(<span class="hashtag">#$1</span>)) || ''}</p>
      </div>
  )

Comments

[Everybody_Lies]

то возвращает span не как тег с содержимым regex, а как строку

replace вам в любом случае вернёт строку.

react-html-parser выводит [object Object]

потому что судя по доке, функция ReactHtmlParser возвращает реакт элемент.

[baroman4ik]

Everybody_Lies, я попробовал применить react-html-parser только потому что в интернетах вычетал что этим можно решить мою проблему, но как-то не очень получается. может есть мысль как все-таки вернуть спан с содержимым из regex

[Everybody_Lies]

baroman4ik, покажите, что у вас находится в text и что вы хотите получить в итоге

[baroman4ik]

Everybody_Lies, text это обычный текст в котором мне нужно найти слова начинающиеся с # и подчеркнуть их. Слова ищу регулярным выражением и пробую обернуть найденные слова в span для подчёркивания, но выводит или спан не в виде тега, а в виде слова между другими словами или в виде [object Object].

Answer 1

[Everybody_Lies]

сначала выполните замену в тексте, а потом эту строку передавайте в ф-ю ReactHtmlParser
Пример