how to handle linebreak
in react

Question

I am setting up an application and At GUI side, I would like to display the textcomment in different lines rather than in one single line. currently it works as follows: 1. From backend json file is received which has key:value pair for comment. Example-> Comment: "Application Entity Title for Service.
The sending system must use exactly the same name to send data to service.

At GUI side, after parsing the JSON file, GUI tries to display the comment.

Issue: GUI is not recognizing the HTML tag
and not displaying a line break.

Question: do I need to handle it in the backend(in C#) in a different way?

json received from backend:

Comment: "Application Entity Title for Service.<br/> The sending system must use exactly the same name to send data to service. <br/>"

GUI react code

<div className="Setting__Comment">
  <p>
    <strong>Description:&nbsp;</strong>
     {node.Comment}
  </p>
</div>

Current Result at GUI side

Description: Application Entity Title for Service.<br/> The sending system must use exactly the same name to send data to service. <br/>

Expected Results.

Description: Application Entity Title for Service. 
             The sending system must use exactly the same name to send data to 
             service.

Solution which worked for me:

  displayComment(){
    var node = this.props.treeNode;
    return {__html: node.Comment};

            <div className="SettingsTreeValueNode__Comment">
              <p>
                <strong>Description:&nbsp;</strong>
                <div dangerouslySetInnerHTML={this.displayComment()}/>
              </p>
            </div>
          </div>

from where you are getting this `
` means is it coming in the `node.Comment` or from somewhere else? — Vikas Singh, Apr 26 '19 at 08:26
yes i am getting it from node.Comment. To be clear, getrequest is sent to server from client, and as a response from server, client gets the json object. and client goes through this json object and gets the information of "Comment" . — user28, Apr 26 '19 at 08:30
then you need to set the `dangerouslySetInnerHTML` property. follow this link https://reactjs.org/docs/dom-elements.html — Vikas Singh, Apr 26 '19 at 08:32
Description:

displayComment(){ var node = this.props.treeNode; return {__html: node.Comment}; — user28, Apr 26 '19 at 08:50

score 1 · Accepted Answer · answered Apr 26 '19 at 08:32

You'd better break down your text into render-able blocks. if you have a <br> in your message, then it should be handled separately as an html token, not a text. so, i'd recommend return an array from your service and for br tokens just render a br explicitly.

Alternatively, you can use dangerouslySetInnerHTML to render the content as is, but it's not the standard way and should be avoided as much as possible.

for dangerouslySetInnerHTML just refer to react documentation here: https://reactjs.org/docs/dom-elements.html

Bankim Sutaria · Answer 2 · 2019-04-26T08:53:18.793

1

You can use

    <div className="Setting__Comment">
     <p>
       <strong>Description:&nbsp;</strong>
       <div dangerouslySetInnerHTML={__html: node.Comment} />
     </p>
    </div>

edited Apr 26 '19 at 08:53

answered Apr 26 '19 at 08:37

Bankim Sutaria

61
3

are your sure this will gonna work? – Vikas Singh Apr 26 '19 at 08:39
i tried this way, it didnt work, ERROR: Uncaught Invariant Violation: `props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. – user28 Apr 26 '19 at 08:40
displayComment(){ var node = this.props.treeNode; return {__html: node.Comment};

Description:

– user28 Apr 26 '19 at 08:49
Yes
should be
. Please refer https://reactjs.org/docs/dom-elements.html for more detail. – Bankim Sutaria Apr 26 '19 at 08:52

score 1 · Answer 3 · answered Apr 26 '19 at 08:41

1

try this way

<div className="Setting__Comment">
     <p>
       <strong>Description:&nbsp;</strong>
       <div dangerouslySetInnerHTML={{__html : node.Comment}} />
     </p>
    </div>

answered Apr 26 '19 at 08:41

Vikas Singh

1,419
13
21

Avinash · Answer 4 · 2019-04-26T08:44:07.410

First, split('<br/>') the string by <br/> and convert to Array.
Then, In React component, Iterate or use indexes to display array values:-

class App extends React.Component{
 render(){
 var Comment = "Application Entity Title for Service.<br/> The sending system must use exactly the same    name to send data to service. <br/>";
  var array = Comment.split('<br/>');
  // console.log(array);
  return(
    <div>
    <div className="Setting__Comment">
         <p>
           <strong>Description:&nbsp;</strong>
            {array.map(comment => <React.Fragment>{comment}<br/></React.Fragment>)
            }
         </p>    
     </div>
    </div>  )
 }
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root' />

this is the only case for
that you have handled. What if in string you are getting
or any other html element. Please try to put generic solutions. — Vikas Singh, Apr 26 '19 at 08:48

how to handle linebreak in react

4 Answers4

or any other html element. Please try to put generic solutions.

how to handle linebreak
in react