Question 204309 in Html Question posted in
Some basic documentation can be found here.

Html – Mapping elements from data into individual <li> elements in website

I am making cards that slide, and I’ve mapped all the information I need except for the ul for my work experience. I’ll attach pictures, but the issue I’m having is mapping data for each slide that is mapped into individual li elements. I was thinking an array inside of an array would be good but I’m fairly new and am now sure how to get everything on a new line.

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

}

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

Tags:

2

Answers


  1. 0

    I think it makes more complicated to use Array & String with n. In my case, I would like to use only string.

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

    It might cause Key warning.

    I recommend you to use only string with n or string[] without n.

    If you want to use array like 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, mapping array in array is very normal usecase I think.

    Login or Signup to reply.
  2. 0

    Step 1 instead of using list: ["Hello" + "n", "Goodbye"] use list: 'HellonGoodBye'

    Step 2 Split and map the data

    {list.description.split('n').map((paragraph) => {
      return <p>{paragraph}</p>
    })}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search