Petakan elemen dalam data ke dalam elemen <li> tapak web bebas

Question

Saya sedang membuat kad yang boleh dileret dan semua maklumat yang saya perlukan dipetakan kecuali untuk pengalaman kerja saya. Saya akan melampirkan gambar, tetapi masalah yang saya hadapi ialah memetakan setiap peluncur ke data dalam elemen li yang berasingan. Saya rasa tatasusunan dalam tatasusunan mungkin bagus, tetapi saya baru dalam hal ini dan tidak pasti bagaimana untuk memastikan semuanya berada pada baris baharu.

Ini kod yang saya ada:

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

}

Di laman web, saya mahu hello dan selamat tinggal berada di baris yang berbeza

Answer 1

Saya rasa menggunakan tatasusunan dan rentetan dengan n akan menjadi lebih rumit. Dalam kes saya, saya hanya mahu menggunakan rentetan.

Sebagai contoh,

list : Hello n Goodbye;

Dan, dalam kod anda.

{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>
  )
})}

Ini boleh menyebabkan amaran penting.

Saya cadangkan anda hanya menggunakan rentetan dengan n atau tatasusunan rentetan tanpa n.

Jika anda ingin menggunakan tatasusunan yang serupa dengan 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>
  )
})}

Selain itu, saya rasa memetakan tatasusunan dalam tatasusunan ialah kes penggunaan yang sangat biasa.