How can I detect line breaks in string coming from state?

Question

I'm having trouble detecting line breaks coming from a text area. The standard .replace('↵', '\n') doesn't work, because by the time I call this.state.note the return characters have been respected.

From the console:

> this.state {flashMessage: "", note: "one potato ↵two potato↵three potato↵four", showShareModal: false, isEditing: true}

> this.state.note "one potato two potato three potato four"

I've attempted to use encoudeURI and searching the string for '\n' - both with no luck.

Is there a way I can get the raw format of this.state.note?

Where does note come from? and what is the return character being replaced with? — Henry
– Henry, Commented Aug 24, 2018 at 17:07
When I look in the database after saving a new note, there are no return characters. So I have nothing to replace. My end goal is to pass this note to a <a href:"mailto:..."> It would be easy if I could detect any kind of return character and replace it with %0A. The note is attached to something like this.props.users where I am iterating over all users that have an attached note. — matty_keene
– matty_keene, Commented Aug 24, 2018 at 17:19
would it be possible to replace returns with '\n' when you take the user input before saving it to the database? — Henry
– Henry, Commented Aug 24, 2018 at 17:23
Unfortunately the same thing is happening on save. Sorry, I should have mentioned that in my failed attempts. changeNote(e) { this.setState({ flashMessage: "", note: e.target.value }); } from the console if I drill down through the event, I can go e.target.defaultValue and see the return characters. But as soon as the state is set, they disappear. — matty_keene
– matty_keene, Commented Aug 24, 2018 at 17:27

Henry · Accepted Answer · 2018-08-24 18:10:11Z

1

React will replace '↵' with '\n' automatically so if your textarea is controlled, your component's state should hold the text for the text area with '\n' characters included. Sending (POST) and storing the text should not remove '\n' characters, so as far as I can tell from the code you have shown, the '\n' characters are still present.

I suspect the issue is simply that HTML does not use '\n' as its linebreak character, so the new lines are not shown on the page. Instead HTML uses <br/>. Better would be to break the note into separate <p> elements. Here's how you could do that:

const splitNote = this.state.note.split('\n').map(e => <p>{ e }</p>);

You could also split note into <span> elements and then put them in a <div> with {display: flex; flex-flow: column;}. Up to you.

Note:

If, for some reason your '\n' characters are being removed somewhere, and there is no reasonable way to stop this, you could replace '\n' with '\\n' before the replacement happens. But I don't think this is a likely scenario.

answered Aug 24, 2018 at 18:10

Henry

15.9k7 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

matty_keene Over a year ago

Thanks for taking the time to explain this! Unfortunately I still was never able to detect line breaks when attempting to split and parse the string. However, I ended up being able to get away with encodeURI.

matty_keene · Accepted Answer · 2018-08-24 23:31:28Z

0

Turns out I was able to use encodeURI(this.state.note). Because my end goal was to pass this to a mailto: link, the encoded return statements get translated perfectly into %0A.

answered Aug 24, 2018 at 23:31

matty_keene

2083 silver badges8 bronze badges

Collectives™ on Stack Overflow

How can I detect line breaks in string coming from state?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related