Array Map into String With Line Break - React

class App extends React.Component{  render(){    var arr = ["hello", "there", "world"]    return(      <div>        {arr.map(s=><React.Fragment>{s}<br/></React.Fragment>)}      </div>    )  }}
ReactDOM.render(<App />, document.getElementById("app"))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><div id="app"></div>

Add a line break into the long string in <li> React

You need to wrap your {movieData.seats} with some element and apply this styles to it:

word-break: break-word;
white-space: pre-wrap;

How to add newline when I return array in React?

Wrap the string in a <div> and then push it into array.

dummyDataLoop = () => {
  var rows = [];
  for (let i = 0; i < 10; i++) {
    rows.push(<div>dummy data</div>);
  }
  return rows;
};

Another way is to use map() and spread operator to shorten the code.

dummyDataLoop = () => [...Array(10)].map(x => <div>dummy data</div>)

How can I insert a line break into a <Text> component in React Native?

This should do it:

<Text>
Hi~{"\n"}
this is a test message.
</Text>

React js - Updating state with array values and a line break

When you say

<div className="validation-msg">{this.state.message}</div>

the {this.state.message} part will be rendered by coercing it to a string (all text in the DOM ends up as a string).

Because message is an array, coercing it to a string is the same as joining all the elements it contains by coercing them individually to a string (in this case they are already strings) and adding a comma in between:

console.log(
 ['a', 'b','c'].toString() // logs: a,b,c
)