Map elements in the data into independent website <li> elements

Question

I'm making a card that can be swiped and have all the information I need mapped except the ul for my work experience. I'd attach a picture, but the problem I'm having is mapping each slider to data in a separate li element. I guess an array within an array might be good, but I'm new to this and not sure how to get everything to be on a new line.

Here is the code I have:

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

}

On the website, I want hello and goodbye to be on different lines

Answer 1

I think using arrays and strings with \n is more complicated. In my case I just want to use strings.

For example,

list : Hello \n Goodbye;

And, in your 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>
  )
})}

This may cause key warnings.

I recommend you to use only strings with \n or string arrays without \n.

If you want to use an array similar to 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>
  )
})}

Also, I think mapping arrays within arrays is a very common use case.