在 React 中渲染换行符

Question

let arr = [{text: "1 x Coffee for 3,4 Euro \n\n3 x Coffee for 3,5 Euro"}]

I would like to parse the newline character( \n) so that every Coffee is displayed on its own line. Like:

'1 x Coffee for 3,4 Euro'
'3 x Coffee for 3,5 Euro'

I tried:

 function FormatBody() {
        return <> {`${arr[0].text.replace(/\n/g, "<br />")}`} </>
      }

But that did not work. Thanks for reading!

Answer 1

Instead of adding <br> elements you could split the text on the line return, and then map over that array and wrap each sentence in a paragraph element.

 function Example({ data }) { function formatBody(text) { return text.split(/\n+/).map(p => <p>{p}</p>); } return ( <div> {formatBody(data[0].text)} </div> ); } const data = [{text: "1 x Coffee for 3,4 Euro \n\n3 x Coffee for 3,5 Euro"}] ReactDOM.render( <Example data={data} />, document.getElementById('react') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>