I have an app that V0 generated for me with example static data, and now I'm adapting it to populate components with data read from a JSON file. The element in question on my one page.tsx looks like this:

<CardContent className="space-y-4">
  <p className="text-slate-700 leading-relaxed text-pretty">{job.summary}</p>
  <div>

The text in the job.summary interface property contains bullet points with just a newline, e.g.

I worked on the ITIS Web application developed for the South African\nNational Roads Agency (SANRAL). Its functions included:\n - Capture of bridge

When I run the app and view the card this is on, all the text is in a single paragraph with just the dashes, e.g.

for the South African National Roads Agency (SANRAL). Its functions included: - Capture of bridge inspections. - Traffic data collection

What is the simplest way of getting these bullet points to render on separate lines in the browser? All I can think of is instead of having just one <p> for job.summary, I split the summary on newline (\n on Windows) into an array of strings, and use map to display one <p> for every bullet point.