Optimal method for storing text descriptions across two platforms (react native and react)

Hello, I hope you are doing well.

I have a question regarding two platforms that I am using - React Native and React (NextJS). Both platforms have forms to save data, one of which is a "text description." Here's the issue:

When I input a long passage like this:

The standard Lorem Ipsum passage, used since the 1500s

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

In my React Native app, the output looks like this: https://i.stack.imgur.com/MviVh.png

If you notice, there is some white space, which is good.

However, when we view the text in React components, it appears without any white space, which is not ideal:

https://i.stack.imgur.com/7jErE.png

If you see it, there's no white space, which is not good.

But at the same time, if I use a markdown editor on the web, I can't use it on mobile (not because I can't display markdown, but because there's no way to use a markdown editor on mobile).

Is there a better solution for this? Please help!

Answer №1

To display pre-formatted text, you can use the <pre> tag or apply the white-space: pre CSS property.

p {
  white-space: pre-wrap;
}

p,
pre {
  width: 200px;
}
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin ullamcorper condimentum. Suspendisse augue nulla, interdum eget orci vehicula, molestie euismod est. Sed bibendum elit a ligula aliquet rhoncus. Morbi posuere elit cursus, scelerisque augue non, laoreet velit.

Nullam vitae massa blandit nulla aliquam condimentum. In luctus facilisis sodales. Vivamus condimentum molestie fermentum. Morbi et purus ligula. Praesent malesuada iaculis diam, vel blandit nulla efficitur quis. Vivamus molestie massa ligula, sed mattis nulla mattis vel. Etiam nec ligula aliquet, porta felis non, bibendum metus.

Aliquam bibendum auctor quam id ultrices. Ut ac suscipit tortor. Sed dictum ante ipsum, eu interdum purus rhoncus in.
<pre>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin ullamcorper condimentum. Suspendisse augue nulla, interdum eget orci vehicula, molestie euismod est. Sed bibendum elit a ligula aliquet rhoncus. Morbi posuere elit cursus, scelerisque augue non, laoreet velit.

Nullam vitae massa blandit nulla aliquam condimentum. In luctus facilisis sodales. Vivamus condimentum molestie fermentum. Morbi et purus ligula. Praesent malesuada iaculis diam, vel blandit nulla efficitur quis. Vivamus molestie massa ligula, sed mattis nulla mattis vel. Etiam nec ligula aliquet, porta felis non, bibendum metus.

Aliquam bibendum auctor quam id ultrices. Ut ac suscipit tortor. Sed dictum ante ipsum, eu interdum purus rhoncus in.
<p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Searching with beautifulSoup's find_all() method across a sequence of HTML tags

I need to find specific tags within tags using BeautifulSoup's find_all() method on a website. For instance, I want to search for data within: <li class='x'> <small class='y'> The issue is that my current code is r ...

Hiding divs toggle off when either all or only one is selected

In a certain page, there is a script that displays a div when a user selects an option. The script functions correctly, except for a scenario where if the user selects 'd' (which shows 'a', 'b', and 'c'), and then se ...

What is the best way to position a grid of divs in the center?

To elaborate on the issue in depth, I need to establish a few assumptions: I possess a list of items with an unknown length (can range from 1 to 50 or more). My objective is to exhibit these items in a grid format, where the number of items per row varie ...

Express causing textarea in http form to have empty req.body

Here is a form for users to upload a file and submit text: form(action='/createpost' enctype="multipart/form-data" method='post' id="imgForm") input(type='file' name='imgPath' size = "60") br textarea(na ...

Is there a way to attach a ref to a Box component in material-ui using Typescript and React?

What is the best way to attach a ref to a material-ui Box component in React, while using TypeScript? It's crucial for enabling animation libraries such as GreenSock / GSAP to animate elements. According to material-ui documentation, using the itemRef ...

What could be causing the DIV elements to not align side by side?

<div id="dvFirst" class="mainSecond" style="background: #6FA5FD;"> <div id="leftdiv3" class="leftdiv">Client: </div> <div id="rightdiv3" class="rightdiv"><asp:DropDownList ID="ddlCliNewMsg" AutoPostBack="t ...

What's the issue with the submit button not functioning on the form?

After downloading a sample form, I encountered the following code: <form id="login-user" method="post" accept-charset="utf-8" action="/home.html" class="simform"> <div class="sminputs"> <div class="input full"> <l ...

Tips to prevent the alert: Ensure that the server's HTML includes a corresponding <button> within the <div> tag

While working on integrating Zoom into my website using NextJS, I encountered an error stating that "window is undefined." I understand that this is because the server cannot access the window object. Although I managed to fix the error, I am not entirely ...

Creating a connection in Strapi via the POST method

I have been working on a Strapi project where each user has a single profile associated with it. When retrieving a single user using Postman, the response looks like this: [ { "id": 45, "username": "test", "em ...

The API has been triggered twice

I am currently working on a React component where I have implemented an API call using the useEffect hook with an empty dependency array. However, I noticed that the API is being called twice and I can't seem to find the reason behind it. import { use ...

Artistically connect the main navigation bar to the secondary one

I am currently working on developing a responsive website. I am following the "content first" methodology, starting with designing for the smallest mobile layout. The homepage of the site (still under construction) looks something like this: When a user c ...

The image source failed to load the image using the function

Initially, I set up a sandbox to work on this issue: https://codesandbox.io/s/naughty-almeida-u66mlt?file=/src/App.js The main problem arises when the requested image fails to display after the function is called and the URL is returned. Here are my atte ...

Choose an input element from an iframe using jQuery

Can anyone assist me with selecting an input field from an iframe using jQuery? The structure of the iframe is as follows: <iframe src="https://checkout.klarna.com" id="klarna-checkout-iframe" name="klarna-checkout-iframe" class="kloading" scrolling="n ...

Encountered issue while attempting to perform search functionality in Datatable using the Moongose-Pagination-v2 plugin

I'm struggling to implement server-side pagination, so I decided to use the Pagination-v2 plugin to fetch data from MongoDB and display it in a data table. However, I've encountered an issue where the search function is not working as expected. I ...

Error in Material UI when using the select component

CustomComponent.js:98 UI Error: The value undefined provided for the selection is out of range. Please make sure to select a value that matches one of the available options or ''. The available options are: `All`, `Software Development`, `Qualit ...

Traditional Javascript is unable to add elements to the DOM

I am currently facing an issue with my website that is built in Expression Engine. The back-end of the website contains a code snippet responsible for handling a JavaScript request and generating a page based on that request. One of the challenges I am en ...

Prevent the bootstrap header in a table from scrolling by enclosing it in

I am encountering an issue with fixing the headers of multiple tables in a page within their dedicated divs. Despite trying various methods, I haven't been successful as the fixed header overflows the div. I want to confine it within the div. Additio ...

Creating a layout with an image positioned on the left and text on the right within a block using CSS

Can anyone provide guidance on how to design a layout similar to the one shown in this image: https://i.sstatic.net/RYAuA.png? I want the image on the left and text on the right, with responsiveness. Any help would be greatly appreciated. Thank you! < ...

``Advanced Web Development: Dealing with HTML5, CSS3, and

I am facing an issue while implementing a design from the CSS and HTML login form templates on my project. Below is the snippet of my HTML: <p id="firstname_line"> <label>First Name:</label> <input type="text" name="firstnam ...

Drop-down functionality in Bootstrap Form becomes unresponsive after screen width is decreased

I recently encountered a strange issue with my simple Bootstrap form. When I resize my browser width to mobile size or view it on a mobile device, the form stops functioning properly. Unfortunately, I am unable to provide any specific code examples at this ...