I want to create javascript string so that when it is passed inside a div tag it shows as a list

I am trying to display a string containing a list of items in a specific format inside a div tag using JavaScript. The string contains several items that I want to display as a bulleted list. Here's the example string:

const items = "These are the items:\n1. apple\n2. mango";

I want to format the string so that it appears as follows inside the div tag:

These are the items:
1. apple
2. mango

I am using React and Tailwind CSS, and this question pertains to a React component.

You can iterate over the map method, by splitting it whenever any '/n' is encountered. Also, you can create an ordered list for this purpose as well. For instance, find the code below.

import React from 'react';
    
const items = "\n1. apple\n2. mango";

const ListComponent = () => {
    const itemList = items.split('\n').map((item, index) => {
        const trimmedItem = item.replace(/^\d+\.\s/, '');
        if (item.trim()) {
          return <li key={index}>{ trimmedItem}</li>;
        }
        return null;
    });

    return (
        <div>
            <p>Here is the list:</p>
            <p>These are the items:</p>
            <ol>{itemList}</ol>
        </div>
    );
};

export default ListComponent;
    

Here the screenshot for the above code when runs
running the above code

You can pass it as innerText:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const items = "These are the items:\n1. apple\n2. mango";
document.getElementById("thediv").innerText=items;

<!-- language: lang-html -->

<div id="thediv"></div>

<!-- end snippet -->

You should split the string by the newline character, then map it into multiple paragraph tags

const items = "These are the items:\n1. apple\n2. mango";

// or if you want it t be reactive:
const [items, setItems] = useState("These are the items:\n1. apple\n2. mango");

Then in the html:

    <div className="list">
      {items.split('\n').map((el) => (
         <p>{el}</p>
       ))}
    </div>

Now the list is displayed correctly, if the items are centered and you want them to be aligned left just put text-align: left; in the list css class

const string = "These are the items:\n1. apple\n2. mango";
console.log(string.split("\n"));

You should parse your string in order to have a list.
A very simple parse would be :
items.split('/n')

and you would receive

["These are the items:", "1. apple", "2. mango"]
which is now easy to display