I want the text that is input in TextArea in same format

Question

I am using TextArea of AntDesign, when I input, say, 2-3 paragraphs in it, and hit enter to display it in a row, but it displays everything in one paragraph. I want the exact formatting that I did while entering in the text area. How to do that?

I am simply using Text area -

  <TextArea
     rows={2}
     style={{ width: "100%" }}
     defaultValue={this.state.value}
     onClick={this.handleValue}
  />

and to display on right side-

  <div>{this.state.value}</div>

EXPECTED

Hey, how are you doing today? I am fine. i hope your are fine

do give me a call when you are free.

contact - 1234567890

WHAT I GET IN RESULT

Hey, how are you doing today? I am fine. i hope your are fine do give me a call when you are free. contact - 1234567890

Answer 1

You can use the pre tag for displaying the content as entered.

I have created following example using vanilla JS. You can implement the same in react.

<textarea id="tarea" rows="2" style="width: 100%" onclick="handleValue()">
</textarea>
<p id="display"></p>
<script>
  function handleValue() {
    var tarea = document.getElementById('tarea');
    var disp = document.getElementById('display');
    disp.innerHTML = '<pre>' + tarea.value + '</pre>';
  }
</script>

For eg:

<pre>{this.state.value}</pre> should do the trick.

Hope this helps! Cheers.