0

I use a JS helper file that consists of objects that are passed into a function that renders it. However, the \n doesn't work and I am not sure how to add line breaks. This is my helper list.

export const TweetList = [
{
    link: 'https://twitter.com/JayWuzer/status/1553804606265651200',
    tweet: "Being your full authentic self is a life hack. \n The ones who don't vibe with you will naturally be repulsed, and the ones who do vibe with you will naturally be drawn to you. \n Saves a LOT of time and heartache.",
    date: 7/31/2022
},

This is my function that renders the text. Could not format properly so I used an image instead.

William Nguyen
  • 21
  • 4
  • Does this answer your question? [New line in react](https://stackoverflow.com/questions/37238523/new-line-in-react) – Samathingamajig Aug 02 '22 at 15:07
  • Could you do something like `TweetList[0].tweet = TweetList[0].tweet.replaceAll("\n","
    ")` to replace all newlines with the HTML line break entity?     – Daniel Black Aug 02 '22 at 15:07

1 Answers1

2

you need to add styles

whiteSpace: 'pre-line'
Andrew
  • 21
  • 1
  • That's a pretty neat css option. I didn't realize it allowed for `\n` to be treated as `
    ` , I'll definitely be using this at some point!     – Daniel Black Aug 02 '22 at 20:05