networkcore :
I have an array that looks like this:
let array = ["Item 1", "Item 2", "Item 3"]
I need all to display all of these items on a new line so I use join
let joinedArray = array.join("\n")
If I log this it is looking correct, however I need to render it to the DOM and that's where the issue lies. How can I render each of these items seperated with a new line to the DOM?
return <MyComponent
{ array.length !== 0 &&
<div>
{joinedArray}
</div>
}
</MyComponent>;
palaѕн :
You can achieve this by simply adding a new class say addlinebreak with white-space: pre-line style:
let array = ["Item 1", "Item 2", "Item 3"]
let joinedArray = array.join("\n")
class App extends React.Component {
render() {
return <div className="addlinebreak">{joinedArray}</div>;
}
}
ReactDOM.render(<App />, document.getElementById("app"));.addlinebreak {
white-space: pre-line;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=398011&siteId=1