Vous pouvez parcourir la méthode de mappage et la diviser chaque fois qu'elle rencontre un "/n". Vous pouvez également créer une liste ordonnée à cet effet. Par exemple, recherchez le code ci-dessous.

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;
    

Voici une capture d'écran du code ci-dessus en cours d'exécution Exécutez le code ci-dessus

Vous devez diviser la chaîne avec des sauts de ligne, puis la mapper à plusieurs balises de paragraphe

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");

Puis en html :

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

Maintenant la liste s'affiche correctement, si les éléments sont centrés et que vous souhaitez qu'ils soient alignés à gauche, tapez simplement text-align: left dans la classe CSS de la liste