how to make a new line for react

Question

Refer to the code below:

<item
     itemName={"laptop"}
     itemDescription={"- XXXX \n - PPPP"}    // how could I make a new line for this?
/>

\n is not working at this

Does this answer your question? [How can I insert a line break into a component in React Native?](https://stackoverflow.com/questions/32469570/how-can-i-insert-a-line-break-into-a-text-component-in-react-native) — gbalduzzi, Aug 03 '20 at 15:43

score 3 · Accepted Answer · answered Aug 03 '20 at 15:44

You can do something like this:

 {text.split(“\n”).map(function(item) {
    return (
       {item}
       <br/>
    )
 })}

In your particular case it would look like this:

 itemDescription={<>XXXX <br /> - PPPP</>}

If your component takes nodes in that property, and not a string.

React doesn't use strings to create the HTMl, and HTML ignores line breaks, so you need to turn that string into JSX with line breaks, or paragraphs.

1 Answers1