Wrapping text to a new line

Question

I want to display the data in the object as one field on one line. I used \n and the white-space: pre-wrap in Css setting. As a result, I get the required result in the console, but the transfer does not work on the screen. Are there similar solutions or am I doing something wrong?

Below is the code where I add \n

  let text = '';
  for (const [, value] of Object.entries(record)) {
    text += value + '\n';
  }
  console.log(text);

for display I use Description in antd

...
        <Col className='m_right' span={13}>
          <Descriptions.Item className='pre'>{text}</Descriptions.Item>
        </Col>

Result:

In console.log it's ok UPDATED______

the method with the substitution of <br/> instead of \n does not work anymore, it is perceived as part of the texts. It may be necessary to additionally convert this to an html fragment, but I'm not sure.

Answer 1

Due to lack of time, I decided to implement it in a different way. Installed the html-react-parser library, then converted the code like this:

import parse from 'html-react-parser';

...

  let text = '';
  for (const [, value] of Object.entries(record)) {
    text += value + '<br>';
  }

...

<Descriptions.Item className='pre'>{parse(text)}</Descriptions.Item>

This worked in my react app:

I still think that it is possible to do this without libraries and dangerouslySetInnerHTML , so I will be glad to the proposed solution ideas