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

Ensure that the body parameter is not empty before proceeding with updating on MongoDB

I am currently working on updating a document in MongoDB using NodeJS with NextJS. The code snippet I have right now looks like this: import connect from "../../util/mongodb"; async function api(req, res) { if (req.method === "POST" ...

Using the .load() function to import an HTML file from the directory above

I am trying to achieve the following structure: folder1 index folder2 page to load Can I dynamically load the 'page to load' in a div within the 'index' page using DIV.load()? I have attempted various paths (../folder2/page, ./, ...

Tips for resolving the error "Cannot access the title property of undefined" when utilizing NextJS prerendering

I am preparing this page in advance for a specific post within my Next.js application: import Head from 'next/head'; import Link from 'next/link'; import client from '../../lib/apollo/client' import POSTS_WITH_SLUGS from &apos ...

The Bootstrap navigation bar isn't displaying properly on mobile devices

Help! My Bootstrap navbar is not working properly on mobile view. The menu icon shows up but when clicked, no items are displayed. Here is the HTML code for my navbar: <header class="header_area"> <div class="main-menu"> ...

The system encountered an issue: the element type provided is invalid, it should have been a string for built-in components or a class/function for composite components, but it was undefined

Take a look at the results and code snippets in these files: https://i.stack.imgur.com/gEQNZ.png https://i.stack.imgur.com/QVEkY.png https://i.stack.imgur.com/nHUe9.png ...

In JavaScript/jQuery, there is a technique for retrieving the values of dynamically generated td attributes and the id tags of elements inside them within tr

I am currently working on creating a calendar of events using PHP, jQuery, and ajax. The calendar is embedded within an HTML table, where the rows and fields are dynamically generated based on the number of days in a specific month. In order to successfull ...

Encountering issues with dependencies while updating React results in deployment failure for the React app

Ever since upgrading React to version 18, I've been encountering deployment issues. Despite following the documentation and scouring forums for solutions, I keep running into roadblocks with no success. The errors displayed are as follows: $ npm i np ...

Loop through the ng-content elements and enclose each one within its own individual nested div

Although it is currently not supported, I am curious to know if anyone has discovered a clever solution to this problem. In my current setup, I have a parent component with the following template: <dxi-item location='after' class="osii-item- ...

When implementing `redux-observable` with NextJS, the `HYDRATION` action may not properly receive the server payload

Packages: redux-observable@2.0.0-rc.2 rxjs latest universal-rxjs-ajax dev branch next-redux-wrapper latest next.js latest I am working on a simple Page with getStaticProps: export const getStaticProps = wrapper.getStaticProps((store) => async (ctx) =& ...

Is the container in semantic ui being breached by a segment overflow?

I've recently started learning Semantic UI. One issue I'm facing is that the width of the "segment" overflows the "container." Check this JSFiddle for more clarity. Are there any alternative solutions? In addition to the grid system, I'm ...

Dynamic Selection of JSON Key-Value Pairs in React Framework

My json data structure resembles the following: { "index": 1, "ln": "27953", "name": "Product 1", "availability": { "day0726": "G", "day0727": "G", "day0728": "G", } } I am looking for a way to dynamically disp ...

Display a pop-up window upon clicking anywhere on the webpage using jQuery and HTML

Is it possible for me to create a pop-up window that opens a specific website when a user clicks anywhere on the page, similar to pop-up companies? Can this be achieved using HTML, JavaScript, and jQuery? Any help would be greatly appreciated. ...

Showing a JavaScript variable on an HTML page

I have a challenge where I am attempting to showcase a variable using the code provided below: HTML: <div id="MyEdit">Money</div> JS: var price1 = 0; var current_value=document.getElementById("MyEdit").innerHTML; if (current_value == "msc" ...

Stopping a velocity.js animation once it has completed: is it possible?

For the pulsating effect I'm creating using velocity.js as a fallback for IE9, refer to box2 for CSS animation. If the mouse leaves the box before the animation is complete (wait until pulse expands and then move out), the pulsating element remains vi ...

Retrieve the server data for react-table when the button is clicked

I have a react-table set up with server-side pagination and it is functioning properly. However, I am facing an issue where the table loads data from the server during the initial page load. My goal is to only load the data into the react-table when a user ...

Establish the editor's starting state

Currently, I am utilizing lexical and aiming to establish initial text for the editor. At the moment, my approach involves hardcoding the initial text, but it seems I cannot simply pass a String as anticipated. Instead, the format required is JSON. Hence ...

Transform the appearance of a button when focused by utilizing CSS exclusively or altering it dynamically

As a newcomer to coding, I am currently working on a project that involves changing the color of buttons when they are clicked. Specifically, I want it so that when one button is clicked, its color changes, and when another button next to it is clicked, th ...

Developing a feature that allows users to switch between different sets of information

I'm currently exploring a new project and attempting to design a toggle that switches between monthly and annual payments based on the user's selection, much like the functionality found here: . At present, I have implemented two sets of price c ...

Is it feasible to incorporate two distinct images into a single element using CSS layering?

I have a question about setting a background image for a web page using CSS. Currently, I have the following code: body { font-size: 62.5%; /* Resets 1em to 10px */ font-family: Verdana, Arial, Sans-Serif; background-color: #9D5922; color: #000; margin ...

Implementing a function in jQuery to create a "Check All" and "Uncheck All" button

Can someone please guide me on how to implement a check all and uncheck all functionality when I check individual checkboxes one by one? Once all checkboxes are checked, the 'checkall' checkbox should automatically be checked. Below is the code s ...