перенос на новую строку в jsx

Творчество начинается тогда, когда вокруг тебя (вне тебя) нет того, что ты хочешь увидеть или услышать. Я хотел услышать определенную музыку и определенные тексты. Но в реальности их не нашлось — не было в то время группы, которая бы меня удовлетворяла. И поэтому группу я сделал сам.
Егор Летов

Я часто делаю так:

array.map(item => <p key={item.id}>{item.text}</p>)

Обычно текст в параграфе это просто текст и в таком случае всё в порядке — он подстраивается под ширину блока и переносится на новую строку там, где ему не хватает места. Но иногда появляется потребность перенести его на новую строку по независящим от ширины блока причинам. Будь у меня обычный html, проблема бы решилась одним тегом <br>, но у меня jsx и всё не так просто.

Я гуглила, забывала, не могла перенести текст с первого раза, ещё раз гуглила, опять забывала, потом подсказывала коллеге и снова гуглила, так что записала решение туда, где его легко будет найти (а не в saved messages)(это сюда)

Как перенести текст

Всё просто:
1. в самой строке в месте переноса нужно поставить классическое \n
2. для блока, в котором находится текст, задать css-правило
white-space: pre-line

демка на кодпене (она же ниже)

ура, текст перенесён