Как добавить тег <br> в реагировать между двумя строками?

Вот как я решил проблему.

Реактивный компонент

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.

Просто разделите текст на /n, я делаю это следующим образом:

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

Некоторые элементы HTML, такие как <img> и <input>, используют только один тег. Тег, который принадлежит элементу с одним тегом, не является открывающим или закрывающим тегом; это самозакрывающийся тег. В JSX вы должны включить косую черту. Итак, удалите <br> и попробуйте <br />

Вот как я обошел это. Пусть message будет prop / variable, в котором есть строка, содержащая разрывы строк для отображения в HTML следующим образом:

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

Чтобы это работало, нам нужно использовать \n вместо тега разрыва <br> и установить следующий css для элемента оболочки этого сообщения следующим образом:

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

Css:

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

Выход:

No results.
Please try another search term.

Попробуйте с span

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

Если вы похожи на мою ситуацию и не хотите добавлять CSS, вы можете сделать это:

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

Разбить текст на строку:

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