Render a text with line breaks in React

Let's assume that you have a text with line breaks such as:

javascript
let text = `Hello\nMy name is Erik\nI'm from Barcelona`

If you try to render the previous text in React:

jsx
import React, { useState } from 'react'

const Text = () => {

    const [text, setText] = useState(`Hello\nMy name is Erik\nI'm from Barcelona`)

    return(
        <div className = 'Text'>
            {text}
        </div>
    )

}

You'll get the following output:

terminal
Hello My name is Erik I'm from Barcelona

Add this line to the CSS to print the line breaks:

CSS
.Text{
    white-space: pre-wrap;
}

Result:

terminal
Hello
My name is Erik
I'm from Barcelona