Mappez les éléments des données en éléments <li> indépendants du site Web.

Question

Je crée des cartes qui peuvent être glissées et sur lesquelles sont cartographiées toutes les informations dont j'ai besoin, à l'exception de mon expérience professionnelle. Je joindrais une image, mais le problème que j'ai est de mapper chaque curseur aux données d'un élément li distinct. Je suppose qu'un tableau dans un tableau pourrait être bon, mais je suis nouveau dans ce domaine et je ne sais pas comment tout mettre sur une nouvelle ligne.

Voici le code que j'ai :

import "./resources.scss"
import {ArrowBackIosNew} from "@mui/icons-material";
import {useState} from "react";

export default function Resources() {
    const [currentSlide, setCurrentSlide] = useState(0);
    const data = [
        {
            id: "1",
            title: "Quality Manager",
            subtitle: "Biolife Plasma Services",
            list: ["Hello" + "\n", "Goodbye"]

        },
        {
            id: "2",
            title: "Second Slide"
        },
        {
            id: "3",
            title: "Third Slide"
        },
        {
            id: "4",
            title: "Fourth Slide"
        }
    ];

    const handleClick = (direction) => {
        direction === "left" ? setCurrentSlide(currentSlide > 0 ? currentSlide-1 : data.length-1) :
            setCurrentSlide(currentSlide<data.length-1 ? currentSlide+1 : 0)
    };

    return(
        <div className = "resources" id="resources">
            <h1>Experiences</h1>
            <div className="slider" style={{transform: `translateX(-${currentSlide * 100}vw)`}}>
                {data.map((d) => (
                <div className="container">
                    <div className="item">
                        <div className="left">
                            <div className="leftContainer">
                                {d.title}
                                <div className="subtext">
                                    {d.subtitle}
                                </div>
                            </div>
                        </div>
                        <div className="right">
                            <ul className="bullets">
                                <li>{d.list}</li>
                            </ul>
                        </div>
                    </div>
                </div>))}
            </div>
        <ArrowBackIosNew className="arrow left" onClick={()=>handleClick("left")}/>
        <ArrowBackIosNew className="arrow right" onClick={()=>handleClick("right")}/>

        </div>
    )

}

Sur le site, je veux que bonjour et au revoir soient sur des lignes différentes

Answer 1

Je pense qu'utiliser des tableaux et des chaînes avec n serait plus compliqué. Dans mon cas, je veux juste utiliser des chaînes.

Par exemple,

list : Hello n Goodbye;

Et, dans votre code.

{data.map(el => {
  const { list } = el;
  return (
    <div>
    //...Your Code
       <div className="right">
         <ul className="bullets">
             {list.split("\n").map((str) => {
               return (
                 <li key={str}>
                  {str}
                 </li>
               )
             })}
         </ul>
       </div>
    </div>
  )
})}

Cela peut provoquer des avertissements clés.

Je vous suggère simplement d'utiliser une chaîne avec n ou un tableau de chaîne sans n.

Si vous souhaitez utiliser un tableau similaire à list : ["Hello", "Goodbye"].

{data.map(el => {
  const { list } = el;
  return (
    <div>
    //...Your Code
       <div className="right">
         <ul className="bullets">
             {list.map((str) => {
               return (
                 <li key={str}>
                  {str}
                 </li>
               )
             })}
         </ul>
       </div>
    </div>
  )
})}

De plus, je pense que mapper des tableaux dans des tableaux est un cas d'utilisation très courant.