Render a multi-line text string in ReactJS

Sometimes we face a problem to display multiline string in separate line instead of online while rendering ReactJs view.

Here are the solution:

Add a new class in css file
.multi-line-break {
  white-space: pre-line;
}

Add css class with you div or p tag
render() {
  const textString = 'First Line \n Second Line \n Third Line';
  return (
     <div className="multi-line-break">
        {textString}
     </div>
  );
}

You will get output like this:
First Line
Second Line
Third Line