Mostrar cada elemento de matriz en la nueva línea

networkcore:

Tengo una matriz que tiene este aspecto:

let array = ["Item 1", "Item 2", "Item 3"]

Necesito todo para mostrar todos estos elementos en una nueva línea, así que uso unirse

let joinedArray = array.join("\n")

Si me conecto esto se busca correcta, sin embargo tengo que presentarlo al DOM y que de si la cuestión corresponde. ¿Cómo puedo hacer que cada uno de estos elementos separados con una nueva línea para el DOM?

return <MyComponent
      { array.length !== 0 &&
        <div>
            {joinedArray}
        </div>
      }
</MyComponent>;

palaѕn:

Esto se puede conseguir simplemente añadiendo un nuevo ejemplo de clase addlinebreakcon white-space: pre-lineestilo:

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>