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

its simply the TextArea that i am using...i have that added above @Peter — Rahul Syal, Jul 31 '19 at 13:26
do you need any more help with this question? Please let me know or mark my answer as accepted. Thank you. — Peter, Jul 31 '19 at 14:06

score 6 · Accepted Answer · answered Jul 31 '19 at 13:43

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.

score 1 · Answer 2 · answered Jul 31 '19 at 13:31

So I don't think there is a simple way of doing so (even if the way of doing is not so hard).

What you'll have to do is get each line of the TextArea, you should be able to get this with something like this :

var textArea = document.getElementById("my-text-area");
var arrayOfLines = textArea.value.split("\n");

Source: https://stackoverflow.com/questions/9196954/how-to-read-line-by-line-of-a-text-area-html-tag

Once you have arrayOfLines, you can output the text like it was typed in with a little for() loop.

Not the array, i have to change the backend too for that – Rahul Syal Jul 31 '19 at 13:59 — Rahul Syal, Jul 31 '19 at 13:59

Peter · Answer 3 · 2019-07-31T15:23:48.730

Provided below are two options for this task:

On keypress "Enter", append a newline char to the line. When displaying the text, split on newline. CodeSandbox example, listen for keycode

function App() {
  const [text, setText] = React.useState("");

  function handleChange(e) {
    if (e.key === "Enter") {
      setText(`${e.target.value}\n`);
    }
    setText(e.target.value);
  }

  return (
    <div>
      <TextArea
        rows={4}
        value={text}
        onChange={handleChange}
        onPressEnter={handleChange}
      />

      {text.length > 0 && text.split("\n").map((l, i) => <p key={i}>{l}</p>)}
    </div>
  );
}

Use pre HTML tag. This is simple, however it renders the text as a monospace font by default. CodeSandbox example, using pre tag

function App() {
  const [text, setText] = React.useState("");

  function handleChange(e) {
    setText(e.target.value);
  }

  return (
    <div>
      <TextArea
        rows={4}
        value={text}
        onChange={handleChange}
        onPressEnter={handleChange}
      />

      <pre>{text}</pre>
    </div>
  );
}

score 1 · Answer 4 · answered Sep 07 '20 at 16:24

As AdityaSrivast said, you can use pre tags. But to wrap the text you should add below CSS.

<style>
     pre {
        overflow-x: auto;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
     }
  </style>

Otherwise, texts will show as one line.

score 0 · Answer 5 · answered Jul 31 '19 at 13:33

0

In my opinion, the problem is in style={{ width: "100%" }}. Try to limit TextAreas width. For example: style={{ width: "100px" }}

answered Jul 31 '19 at 13:33

aslantorret

273
4
10

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

5 Answers5