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

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>
       );
   }

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>
   );
}

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.

break text to line:

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

Some HTML elements such as <img> and <input> use only one tag. Such tags that belong to a single-tag element aren't an opening tag nor a closing tag. Those are self-closing tags.

In JSX, one has to include the slash. So, remove <br> and try <br />

Here is how I got around this. Let message be the prop/variable that has the string containing line breaks to be displayed in HTML as follows:

message = 'No results.<br>Please try another search term.';
<div>
  {message}
</div>

To make this work, we need to use \n instead of break tag <br> and set the following css on the wrapper element of this message as follows:

message = 'No results.\nPlease try another search term.';
<div className="msg-wrapper">
  {message}
</div>

CSS:

.msg-wrapper {
  white-space: pre-wrap;
}

OUTPUT:

No results.
Please try another search term.

If you don't want put the string inside a <div> you could use <> to do it.

Like this:

var text = <>This is a text in the first line;<br />this is a text in a second line</>;

Just split text by /n, I do this in this way:

<div>
    {text.split('\n').map((item, i) => <p key={i}>{item}</p>)}
</div>

Try with span

return (
           <div className='movieList'><span>{movieList}</span></div>
       );

If you are like in my situation and you don't want to add css, you can do that :

render () {
...
return (
...
<Typography component="p">
...
{(contact.lastname)?<div>Hello {contact.firstname} {contact.lastname}</div>:''}
...
</Typography>
...
);
}

using `

worked for me however i am not sure if it is the exact solution to the problem :

 import React from 'react';
import ReactDOM from 'react-dom';

let element = (
<div>
  <h1> Hello world</h1>
  This is just a sentence <br></br>
  But This line  should not be in the same previous line. <br></br>
  The above content proves its working. <br></br>
  npm v6.14.6 | react : {React.version} 
</div>
);

ReactDOM.render(element,document.getElementById("html-element-id"))

You can add a span tag and add block as a class.

Pomodoro Technique Timer <span className="block">with Bla</span>

The simplest thing which I did is by creating a component.

const EmptySpace = ({ spaceCount = 0 }) => {
  return (
    <>
      {Array.from({ length: spaceCount }, (item, index) => {
        return <br key={index} />;
      })}
    </>
  );
};

export default EmptySpace;

<EmptySpace spaceCount={1} />

In your case you could do something like this:

const msg = (
    <p>
      No results <EmptySpace spaceCount={2} />
      Please try another search term.
    </p>
  );