How to properly add a break in JSX file for displaymessage?-CodePudding

handleNotFound() {
    this.setState({
        displayMessage:
            'It looks like the link you are trying to reach does not exist.\n      '  

            'If you clicked this link , please leave a comment within the article that contained the link so the author can be notified.\n       '  

            'If you clicked this link from a location outside of __, please contact the _to open a ticket with the application where this link is referenced .\n      '  
            
            'The link you were trying to reach:     '  
            url
    });

The display message ends up coming out in one sentence, how do i properly add a break between each sentence?

CodePudding user response：

handleNotFound() {
    this.setState({
        displayMessage: `
          something went wrong.
          I think you should use html tags 
          to render your error message if it is in the dom
        `
    });

// Jsx won't break your paragraphs but you have two options

Wrap the displayMessage in pre tag. `
```
{this.state.displayMessage}
```
Split, map & trim the string.

render(){
  return this.state.displayMessage.split("\n").map(sentence => (
    <p>{sentence.trim()}</p>
  ))

}

CodePudding user response：

For things like standard messages I would be more inclined to have them in a configuration file rather than state. The config file can include anything: objects, arrays, functions that return arrays...

The latter is what I've used in this code because you need to fill out the url at some point. The function accepts a url argument, and fills that out when the array is returned. You can then map over the array and display each line.

const { Component } = React;

const config = {
  displayMessage: function (url) {
    return [
      'It looks like the link you are trying to reach does not exist.',
      'If you clicked this link , please leave a comment within the article that contained the link so the author can be notified.',
      'If you clicked this link from a location outside of __, please contact the _to open a ticket with the application where this link is referenced.',
      `The link you were trying to reach: ${url}`
    ]
  }
}

class Example extends Component {

  constructor() {
    super();
    this.url = 'http://www.google.com';
  }

  render() {
    return (
      <div>
        {config.displayMessage(this.url).map(line => {
          return <p>{line}</p>;
        })}
      </div>
    );
  }

};

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

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