How to create and return a text Array in React?-CodePudding

So I'm making a carousel with images and would like to also include corresponding text. Have successfully mapped through my images array however my text array not so successful. It's 100% a syntax error because I'm shooting in the dark here. How should I be going about this instead?

Note: apologies not sure how to insert react code snippets, but these are 3 seperate javascript files and the function is returned in my app.js

TEXT ARRAY
<div>
    <p className="cuisine1">Breakfast</p>
    <p className="cuisine2">Burgers</p>
    <p className="cuisine3">Indian</p>
    <p className="cuisine4">Dessert</p>
    <p className="cuisine5">Italian</p>
    <p className="cuisine6">Kebab</p>
    <p className="cuisine7">Sushi</p>
    <p className="cuisine8">Pizza</p>
    <p className="cuisine9">Breakfast</p>
    <p className="cuisine10">Carvery</p>
    <p className="cuisine11">Greek</p>
    <p className="cuisine11">Healthy</p>
</div>
export default [cuisine1, cuisine2, cuisine3, cuisine4, cuisine5,
    cuisine6, cuisine7, cuisine8, cuisine9, cuisine10, cuisine11 ]
    
    
IMAGE ARRAY 
import image1 from "../img/breakfast.jpg";
import image2 from "../img/burger.jpg";
import image3 from "../img/curry.jpg";
import image4 from "../img/dessert.jpg";
import image5 from "../img/italian.jpg";
import image6 from "../img/kebab.jpg";
import image7 from "../img/sushi.jpg";
import image8 from "../img/pizza.jpg";
import image9 from "../img/roast.jpg";
import image10 from "../img/greek.jpg";
import image11 from "../img/healthy.jpg";

export default [image1, image2, image3, image4, image5,
image6, image7, image8, image9, image10, image11 ]

CAROUSEL FUNCTIONALITY
import {motion} from "framer-motion";
import {useRef, useEffect, useState} from "react";
import images from "../img/carouselArray"
import {cuisine} from "../img/cuisineArray"
import "../style/home.css";

export const Carousel = () => {

    const [width, setWidth] = useState(0);
    const carousel = useRef();

    useEffect(() => {
        // console.log(carousel.current.scrollWidth, carousel.current.of
        setWidth(carousel.current.scrollWidth - carousel.current.offsetWidth)
    }, []);

    return (
        <div className="carouselContainer">
        
        <motion.div ref={carousel} className="carousel" whileTap={{cursor: "grabbing"}}>
        <motion.div drag="x"
        dragConstraints= {{ right: 0, left: -width}}
        className ="innerCarousel">
                {images.map(image =>{
                    return(
                      <motion.div className="item" key={image}>
                          {cuisine}
                          <a href="/"><img className="itemImg" src={image} alt="Cuisine"/></a>
                      </motion.div>
                    );
                })}
            </motion.div>
            </motion.div>


        </div>
        
    );
}

CodePudding user response：

did you try

                {images.map((image , index) =>{
                return(
                  <motion.div className="item" key={image}>
                      {cuisine[index]}
                      <a href="/"><img className="itemImg" src={image} alt="Cuisine"/></a>
                  </motion.div>
                );
            })}

CodePudding user response：

Your approach is wrong. Instead of doing like this, create an array of objects. For example

const carouselArray = [
  {
    "image": image1,
    "cuisine": cuisine1
  },
  {
    "image": image2,
    "cuisine": cuisine2
  }{
    "image": image3,
    "cuisine": cuisine3
  }{
    "image": image4,
    "cuisine": cuisine4
  }
]

Then

{carouselArray.map((item , index) =>{
                return(
                  <motion.div className="item" key={item.image}>
                      {item.cuisine}
                      <a href="/"><img className="itemImg" src={item.image} alt="Cuisine"/></a>
                  </motion.div>
                );