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