Make Typography "paragraph based"

Question

I'm trying to display a very long string on a page using a single Material UI Typography. I would like to display it as a text with some paragraphs, however, reading the docs I found that Typography has only a paragraph prop on it, and I guess I'd have to break my long string into small pieces of Typographies. But, once the data is coming as a string from the DB, would there be a better approach for this matter?

this is my display page displayPage

this is my DB (I'm using mongoDB Atlas, btw) enter image description here

Answer 1

I think it's hard to have a rule for separating. but i think you are looking to separate the long text into paragraphs based on dot as indicator of paragraph end.

Here is an example that could help you

https://codesandbox.io/s/react-mui-forked-mh1t6h?file=/index.js

NB: This example can't handle all possibilities since ther is a lot of options when this snippet can't work for you.

Example :

if you have a text like :

This is the verions 1.4.5 

In that case , you are going to have each number in paragraph

Solution:

First of all , think about all possibility that you may have in the usecase & try to build a regex.

And then , pass the regex to the split function , so that way you could handle this issue.