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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.