What is the best way to preserve line breaks in a React Native database using the <pre> tag or a similar method?

Question

What is the best way to preserve line breaks in a React Native database using the <pre> tag or a similar method?

I am currently diving deep into learning React Native with Express.js on the backend and React-Native on the frontend. I have implemented a multiline TextInput in my form like below:

  <TextInput
      style={{ textAlign: 'center', fontSize: 22 }}
      multiline = {true}
      numberOfLines = {4}
      ....
  />

After inputting data, the form is submitted using the following code snippet:

onQuestionSubmit() {
   fetch('url', {
    credentials: 'same-origin',
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
     databaserow: this.state.blahblah,
   }),
  })
 }

However, when I retrieve and render the data from the database, it appears as a single line even if I pressed "enter" for line breaks while entering the text. How can I maintain the line breaks when submitting the form?

css express react-native

Answer 1

Answer №1

One reason for this issue could be the usage of JSON to transmit your data.

An initial remedy is to add an escape character "\" like this:

  onQuestionSubmit() {

   var blah = this.state.blahblah;
   blah = blah.split('\n').map((item, key) => {
     return item+'\\n'
   }).join('');

   fetch('url', {
    credentials: 'same-origin',
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
     databaserow: blah,
   }),
  })
 }

In your TextInput, the defaultValue should look something similar to this:

defaultValue={this.state.blahblah.split("\\n").join('\n')}

Alternatively, you can change the \n to a different format like maybe <br/>. The code structure would remain the same as above, but replace \\n with <br/>.

Answer 2

One reason for this issue could be the usage of JSON to transmit your data.

An initial remedy is to add an escape character "\" like this:

  onQuestionSubmit() {

   var blah = this.state.blahblah;
   blah = blah.split('\n').map((item, key) => {
     return item+'\\n'
   }).join('');

   fetch('url', {
    credentials: 'same-origin',
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
     databaserow: blah,
   }),
  })
 }

In your TextInput, the defaultValue should look something similar to this:

defaultValue={this.state.blahblah.split("\\n").join('\n')}

Alternatively, you can change the \n to a different format like maybe <br/>. The code structure would remain the same as above, but replace \\n with <br/>.

What is the best way to preserve line breaks in a React Native database using the <pre> tag or a similar method?

Answer №1

Similar questions

The division is now appearing below the preceding division instead of following it

Interactive Navigation System Featuring Nested Dropdowns in HTML and CSS

Mastering the Art of jQuery: Easily Choosing and Concealing a Div Element

PostgreSQL is indicating that a relation is not present, even though the table itself does exist

Is there a way to conceal a Select element so that it is not visible on the screen, yet can still activate the dropdown menu when another element is clicked

Numerous sections of content

Error in JavaFX: CSS Parser anticipating COLON

Error: JSON parsing failed due to an unexpected token 'e' at index 3

Establish a primary background color for the React application, with the majority of the display content

Displaying a dropdown menu from the top by utilizing the show() function

Is this the correct method for constructing a class in CSS?

What should be included in the get/set/destroy functions for a koa-session database instance?

Getting the name and value from an object

JQuery is capable of hiding a div using the .hide() method but is unable to reveal it using the

The issue regarding the fixed table layout bug in Firefox

The user can witness the appearance of a scrollbar when utilizing the

Creating a new music application and looking for ways to keep track of and update the number of plays for

Tips for displaying specific information using Javascript depending on the input value of an HTML form

react-native-track-player failing to play song requested from Express server

Enable the expansion of a div by dragging and dropping an image onto it