How to add a <br> tag in reactjs between two strings?

Question

I am using react. I want to add a line break <br> between strings

'No results' and 'Please try another search term.'.

I have tried 'No results.<br>Please try another search term.'

but it does not work, I need to add the <br> in the html.

Any ideas how to solve it?

   render() {
       let data = this.props.data;
       let isLoading = this.props.isLoading;
       let isDataEmpty = Object.entries(data).length === 0;
       let movieList = isLoading ? <Loader /> : isDataEmpty ? 'No results. Please try another search term.' :
           Object.entries(data).map((movie, index) => <MovieTile key={index} {...movie[1]} />);
       return (
           <div className='movieList'>{movieList}</div>
       );
   }

Answer 1

You should use JSX instead of string:

<div>No results.<br />Please try another search term.</div>

Because each jsx should have 1 wrapper I added a <div> wrapper for the string.

Here it is in your code:

render() {
   let data = this.props.data;
   let isLoading = this.props.isLoading;
   let isDataEmpty = Object.entries(data).length === 0;
   let movieList = isLoading ? <Loader /> : isDataEmpty ? <div>No results.<br />Please try another search term.</div> :
       Object.entries(data).map((movie, index) => <MovieTile key={index} {...movie[1]} />);
   return (
       <div className='movieList'>{movieList}</div>
   );
}

Answer 2

You can use CSS white-space to solve the problem.

React Component

render() {
   message = `No results. \n Please try another search term.`;
   return (
       <div className='new-line'>{message}</div>
   );
}

CSS

.new-line {
  white-space: pre-line;
}

OUTPUT

No results.
Please try another search term.

Answer 3

break text to line:

render() {
  ...
  <div>
    {this.props.data.split('\n').map( (it, i) => <div key={'x'+i}>{it}</div> )}
  </div>
  ...