React Display Line Breaks from Saved Textarea

React display line breaks from saved textarea

There's no reason to use JS. You can easily tell the browser how to handle newline using the white-space CSS property:

white-space: pre-line;

pre-line

Sequences of whitespace are collapsed. Lines are broken at
newline characters, at <br>, and as necessary to fill line boxes.

Check out this demo:

<style>
#p_wrap {
white-space: pre-line;
}
</style>

<textarea id="textarea"></textarea>
<p id="p_standard"></p>
<hr>
<p id="p_wrap"></p>
<script>
textarea.addEventListener('keypress', function(e) {
p_standard.textContent = e.target.value
p_wrap.textContent = e.target.value
})
</script>

Visualize onkeypress line breaks in textarea with REACT

The easiest way would be through CSS, by following:

...
<div className="App">
<div className="wrapper">
<div>
<p class='formatted'>{text}</p>
</div>
...

And then: .formatted { white-space: pre; }

Another way would be using dangerouslySetInnerHTML:

...
<div className="wrapper">
<div>
<p
dangerouslySetInnerHTML={{
__html: formattedText,
}}>
</p>
</div>
...

And the logic to handle that would be:

const [text, setText] = useState('');
const [formattedText, setFormattedText] = useState(text);

const handleTextInput = ({ target }) => {
const { value } = target;
const formattedValue = value.replace(/\n/g, '<br />');

setText(value);
setFormattedText(formattedValue);
};

How to set textarea value with line break in ReactJS

Use for line breaks in html:

 <Header header="Line1
Line2
Line3
Line4"></Header>

React Js: prevent line breaks or submit on enter in the text area

Just prevent default for Enter like this:

<textarea onKeyPress={e => {
if(e.key === 'Enter')
e.preventDefault()
}}
/>

Line breaks in textareas in React

As your array is an array of strings (the names), you don't need to map() because that would create a resulting array and if you try to output an array as the textarea value, it will be converted to a string with commas to separate the values.

The solution is to call Array.prototype.join() on the array and use a new line as the "glue":

var formattedNamesBreak = this.props.formattedNames.join('\n');

How to render a multi-line text string in React

You could try putting divs for each line

render() {
return (<div>
<div>{"One"}</div>
<div>{"Two"}</div>
<div>{"Three"}</div>
</div>);
}

Or

render() {
var text = "One\nTwo\nThree";
return (
<div>
{text.split("\n").map((i,key) => {
return <div key={key}>{i}</div>;
})}
</div>);
}

Limit line breaks in textarea

You can use the String methods search and include inside a while loop to remove all but one of a given repeated character.