как отформатировать текст в форме React.js

я отправляю форму через сайт на telegram api но мне не нравится формат сообщение

введите сюда описание изображения

мне нужно каждый ${username}, ${comment} и ${phone} на новой строке

должно выглядеть так:

Имя: ${username}

Сообщение: ${comment}
Номер тел: ${phone}

Имя: ${username} \n Сообщение: ${comment} \n Номер тел: ${phone}. -перенос с \n не работает

<br> тоже


Ответы (1 шт):

Автор решения: Ajeet Shah

Вы можете использовать white-space: pre-line CSS:

function App() {
  const [username, setUsername] = React.useState("John")
  const [comment, setComment] = React.useState("Hey")
  const [phone, setPhone] = React.useState("123123")
  
  const full = `Имя: ${username} \n Сообщение: ${comment} \n Номер тел: ${phone}`
  return <div className="pre-line">{full}</div>
}

ReactDOM.render(<App />, document.getElementById('root'))
.pre-line {
  white-space: pre-line;
}
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<body>
<div id="root"></div>
</body>

→ Ссылка