Как вставить innerHTML в React JS

Йо-йо! Представим, что с сервера к нам приходит текст, который содержит перенос строк. Мне кажется, что именно это стало причиной по которой вы зашли на эту страницу. Я угадал?!)

Вставить html в react’е очень просто:

/** dangerouslySetInnerHTML - вот то, что вам нужно */ 
<div dangerouslySetInnerHTML={innerHTML}></div>

Но само уже название свойство элемента нам, как бы, подсказывает, что лучше бы им не пользоваться…. А чем пользоваться, чтобы сделать разметку текста?! Сейчас я вам расскажу.

Вставляем текст с сервера на страницу

Представим, что с сервера к вам при шёл текст с переносом строк. Этот текст мы должны разбить на строки и распечатать JSX

const value = responce.text // Тут храниться наш текст с сервера
const arrStrings = value.split('\n') // разбиваем текст по строкам
arrStrings.map((str, i) => <p key={`p_${i}`}>{str}</p>)

Вот как это выглядит в деле (пример просто на js)

А вот как это выглядит на реакте

import React from 'react';
import './App.scss'


function App() {
  const getFormatedText = (text) => {
    return text.split('\n').map((str, i) => <p key={`p_${i}`}>{str}</p>)
  }

  return (
    <div className={`wrap`}>
      <div>
        {getFormatedText(`
          текст
          с переносом строк
          вот!)
        `)}
      </div>
    </div>
  );
}

export default App;

Всего одна строка кода и вы пользуетесь архитектурой реакта, а не опасными методами.

P.S.

Если вы хотите, чтобы я записал видио на тему, которая вас интересует то подпишитесь на мою группу в ВК и расскажите, чтобы вы хотели прочитать или увидеть на моём youtube канале.

О планах

В ближайшее время (написано 14.09.2020) ко мне приедет один девайс и вы сможете не только читать блог и слышать меня, но и видеть на моём youtube-канале. Ближайший ролик будет о подсветке найденового текста при поиске в элементах (react).