Je souhaite créer une chaîne javascript afin que lorsqu'elle est passée dans une balise div, elle s'affiche sous forme de liste

Question

J'essaie d'utiliser JavaScript pour afficher une chaîne contenant une liste d'éléments dans un format spécifique à l'intérieur d'une balise div La chaîne contient plusieurs éléments que je souhaite afficher sous forme de liste à puces. Voici un exemple de chaîne :

<code>const items = "Ce sont les éléments : n1 applen2".
</code>

Je souhaite formater une chaîne pour qu'elle apparaisse comme ceci à l'intérieur d'une balise div

Voici les éléments :
1. pomme
2.mangue
J'utilise React et Tailwind CSS et ce problème est lié aux composants React. 

Answer 1

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

Answer 2

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