React / Formatting JSON Object with line breaks

Question

Is it possible to have line breaks within one value of an JSON Object? I tried with \n with br-tag and with template literals like bla bla ${\n} bla bla bla, but it's not working.

My code looks like this in the Object

export const Data = [
{
    id: 1,
    item: 'blablabla',
    detail:
        'bla bla bla. <here I want a line break> bla bla bla'
}]

Thanks for your help

If you use the prop dangerouslySetInnerHTML={{ __html: 'text <br/> text' }} on the element where you want to render the text you can do it with <br/> — Nicolae Maties
– Nicolae Maties, Commented Feb 26, 2021 at 14:45
Thanks Nicolae. I read about dangerouslySetInnerHTML and I'm not sure, if I should use it. Is there any other possibility to have a line break in an external data object value? — kinglycodes
– kinglycodes, Commented Feb 26, 2021 at 15:00

RodrigoSosa · Accepted Answer · 2022-01-29 16:41:27Z

1

The best approach I found is to use the css property white-space: "pre-wrap"; , it will let you use line breaks without <br/>

I would also recommend to write the text with template literals so you don't need to use \n

export const Data = [
    {
        id: 1,
        item: 'blablabla',
        detail: "bla bla bla. \n bla bla bla",
        betterDetail: 
            `it will
             also
             works like this
             `
     }]

answered Jan 29, 2022 at 16:41

RodrigoSosa

553 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React / Formatting JSON Object with line breaks

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related