Rendering text that is a list with Reactjs - css

Question

My test from api:
"-
Flight for two with a certified flight instructor -
Approximately 1.5 hours of airtime in a Socata TB-10 Tobago -
Opportunity for one passenger to control the plane during part of flight; no experience necessary -
Learn about the flight plan, instrumentation, and basic aircraft control during preflight instruction -
Epic photo ops above spectacular natural scenery and world-famous sites -
Aerial views of downtown LA, the Hollywood sign, film studios, Griffith Observatory, Beverly Hills, Dodger Stadium, the coast, and more "
I want to render this as a list with Reactjs. I have tried the css white-space property with no luck:
-
Flight for two with a certified flight instructor
-
Approximately 1.5 hours of airtime in a Socata TB-10 Tobago
-
Opportunity for one passenger to control the plane during part of flight; no experience necessary
-
Learn about the flight plan, instrumentation, and basic aircraft control during preflight instruction
-
Epic photo ops above spectacular natural scenery and world-famous sites
-
Aerial views of downtown LA, the Hollywood sign, film studios, Griffith Observatory, Beverly Hills, Dodger Stadium, the coast, and more
Thoughts?

Answer 1

I think that's what are you looking for:
class App extends React.Component {
getList = () => {
let apiData = `-
Flight for two with a certified flight instructor -
Approximately 1.5 hours of airtime in a Socata TB-10 Tobago -
Opportunity for one passenger to control the plane during part of flight; no experience necessary -
Learn about the flight plan, instrumentation, and basic aircraft control during preflight instruction -
Epic photo ops above spectacular natural scenery and world-famous sites -
Aerial views of downtown LA, the Hollywood sign, film studios, Griffith Observatory, Beverly Hills, Dodger Stadium, the coast, and more `;
return apiData.split("\n").map(item => <li> {item} </li>);
};
render() {
return <div className="App">{this.getList()}</div>;
}
}
DEMO