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

Dekel · Accepted Answer · 2017-08-29 09:44:24Z

107

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

answered Aug 29, 2017 at 9:44

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

joedotnot Over a year ago

?? Does not work for me. in the return method of render, i have<div> {this.state.myErrorString}</div>, where myErrorString itself begins with a <div> and ends with a </div> and has <br/> inside it, and all the tags displays !

Dekel Over a year ago

@joedotnot does myErrorString is a string or a jsx object?

joedotnot Over a year ago

It is a string; For example: this.setState({myErrorString : "<div>it is a string.<br/>continue here</div>"}) which I then render inside jsx; For example: render() { return <div>{this.state.myErrorString}</div> }

joedotnot Over a year ago

It looks like let movieList = a jsx object ! So how do i transition from a string in state into a jsx object?

Dekel Over a year ago

This is a complete different question. Why are you using a string on the first place instead of a jsx object?

|

mikemaccana · Accepted Answer · 2021-03-31 10:16:44Z

90

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.

edited Mar 31, 2021 at 10:16

mikemaccana

126k113 gold badges441 silver badges544 bronze badges

answered Jul 23, 2019 at 9:04

Gulfam

9096 silver badges2 bronze badges

6 Comments

Dayglor Over a year ago

The best way to fix!

T.Chmelevskij Over a year ago

This should be the one and only and accepted answer

Nilesh Over a year ago

new to react, so my line of thinking is: how would i add a line break in pure html? then why do i have to create this contrived class to add a new line in react?

Yohan W. Dunon Over a year ago

Nice one! I recommend this method.

ADTC Over a year ago

@Nilesh there's no need to add a line break tag in HTML when CSS can simply show the literal line breaks in the content. In React, all text content is sanitized, so it's more difficult to output text (from a source you don't control) with HTML line breaks unless you do some Javascript parsing (overkill for a small problem) or you use dangerouslySetInnerHTML (dangerous with user input).

|

Алексей Носиков · Accepted Answer · 2017-10-07 05:36:09Z

19

break text to line:

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

answered Oct 7, 2017 at 5:36

Алексей Носиков

1893 bronze badges

Comments

Konrad Viltersten · Accepted Answer · 2022-04-17 11:13:48Z

16

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 />

edited Apr 17, 2022 at 11:13

Konrad Viltersten

40.2k90 gold badges296 silver badges525 bronze badges

answered Jun 16, 2018 at 6:43

mengru zhang

4094 silver badges9 bronze badges

Comments

Vishal · Accepted Answer · 2019-04-02 02:46:41Z

12

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.

answered Apr 2, 2019 at 2:46

Vishal

11k22 gold badges90 silver badges136 bronze badges

Comments

Gabriel Stafoca · Accepted Answer · 2021-03-29 13:42:07Z

4

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</>;

answered Mar 29, 2021 at 13:42

Gabriel Stafoca

414 bronze badges

1 Comment

codescribblr Over a year ago

I wanted my code directly inline but the React.Fragment was the way to do it.

Idan · Accepted Answer · 2020-03-06 14:34:08Z

3

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

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

answered Mar 6, 2020 at 14:34

Idan

4,1531 gold badge33 silver badges34 bronze badges

Comments

Sankar · Accepted Answer · 2017-08-29 09:43:52Z

1

Try with span

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

answered Aug 29, 2017 at 9:43

Sankar

7,1772 gold badges36 silver badges57 bronze badges

Comments

Flavien M. · Accepted Answer · 2019-08-29 12:07:44Z

1

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

answered Aug 29, 2019 at 12:07

Flavien M.

215 bronze badges

Comments

ansh sachdeva · Accepted Answer · 2020-09-04 20:18:04Z

0

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"))

answered Sep 4, 2020 at 20:18

ansh sachdeva

1,1811 gold badge18 silver badges36 bronze badges

Comments

Mario Callejas · Accepted Answer · 2021-01-07 07:56:54Z

0

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

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

answered Jan 7, 2021 at 7:56

Mario Callejas

1011 silver badge2 bronze badges

Comments

maazu · Accepted Answer · 2022-05-14 11:17:00Z

0

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

edited May 14, 2022 at 11:17

answered May 14, 2022 at 10:43

maazu

311 gold badge2 silver badges8 bronze badges

Comments

dingnanco · Accepted Answer · 2023-05-25 03:03:02Z

0

can pass the content as an array ref: https://reactjs.org/docs/jsx-in-depth.html

Page

import MyComponent from './components/myComponent';

export default function Page() {
  return(
        <div>
            <MyComponent
              content= {["Line 1", <br/>,  "Line 2", <br/>, "Line 3"]}
            />
        </div>
  )
}

React Component

export default function MyComponent(props) {
  return (
    <p>
        {props.content}
    </p>
  )
}

OUTPUT

Line 1
Line 2
Line 3

answered May 25, 2023 at 3:03

dingnanco

312 bronze badges

Collectives™ on Stack Overflow

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

13 Answers 13

6 Comments

6 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

6 Comments

6 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related