title: How to create and return a text Array in React?
body: <p>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?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>TEXT/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 ]
  
  
  
  
  const cuisine1 = "Breakfast";
  const cuisine2 = "Burger";
  const cuisine3 = "Indian";
  const cuisine4 = "Dessert";
  const cuisine5 = "Italian";
  const cuisine6 = "Kebab";
  const cuisine7 = "Sushi";
  const cuisine8 = "Pizza";
  const cuisine9 = "Roast";
  const cuisine10 = "Greek";
  const cuisine11 = "Healthy";
  
  export const cuisineString=[
  {
    cuisine: cuisine1
  },
  {
    cuisine: cuisine2
  },
  {
    cuisine: cuisine3
  },
  {
    cuisine: cuisine4
  },
  {
    cuisine: cuisine5
  },
  {
    cuisine: cuisine6
  },
  {
    cuisine: cuisine7
  },
  {
    cuisine: cuisine8
  },
  {
    cuisine: cuisine9
  },
  {
    cuisine: cuisine10
  },
  {
    cuisine: cuisine11
  }
    ] 
  
  CAROUSEL FUNCTIONALITY
  import {motion} from "framer-motion";
  import {useRef, useEffect, useState} from "react";
  import image from "../img/carouselArray"
  import {cuisineString} from "../img/carouselArray"
  import "../style/home.css";
  
  export const Carousel = () =&gt; {
  
      const [width, setWidth] = useState(0);
      const carousel = useRef();
  
      useEffect(() =&gt; {
          // console.log(carousel.current.scrollWidth, carousel.current.of
          setWidth(carousel.current.scrollWidth - carousel.current.offsetWidth)
      }, []);
  
      return (
          &lt;div className="carouselContainer"&gt;
          
          &lt;motion.div ref={carousel} className="carousel" whileTap={{cursor: "grabbing"}}&gt;
          &lt;motion.div drag="x"
          dragConstraints= {{ right: 0, left: -width}}
          className ="innerCarousel"&gt;
                  {image.map(image =&gt;{
                      return(
                        &lt;motion.div className="item" key={image}&gt;
                            {/* &lt;h5&gt;Cuisine&lt;/h5&gt; */}
                            &lt;a href=""&gt;&lt;img className="itemImg" src={image} alt="Cuisine"/&gt;&lt;/a&gt;
                        &lt;/motion.div&gt;
                      );
                  })}
                   {cuisineString.map(index =&gt;{
                      return(
                        &lt;motion.div className="item" key={index}&gt;
                            &lt;h5&gt;{index}&lt;/h5&gt;
                            {/* &lt;a href=""&gt;&lt;img className="itemImg" src={image} alt="Cuisine"/&gt;&lt;/a&gt; */}
                        &lt;/motion.div&gt;
                      );
                  })}
              &lt;/motion.div&gt;
              &lt;/motion.div&gt;
      
      
          &lt;/div&gt;
          
      );
      }</code></pre>
  </div>
  </div>
  </p>
  <p>UPDATE: Found a solution will insert code snippet below</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Two Seperate arrays for images and strings: 
  
  import image1 from "../img/chinese.jpg" ;
  import image2 from "../img/burger.jpg";
  import image3 from "../img/italian.jpg";
  import image4 from "../img/indian.jpg";
  import image5 from "../img/kebab.jpg";
  import image6 from "../img/sushi.jpg";
  
  
  
  export default [image1, image2, image3, image4, image5,
  image6]
  
  
  const cuisine1 = "Chinese";
  const cuisine2 = "American";
  const cuisine3 = "Italian";
  const cuisine4 = "Indian";
  const cuisine5 = "Turkish";
  const cuisine6 = "Japanese";
  
  export const cuisineString=[
      {
        cuisine: cuisine1
      },
      {
        cuisine: cuisine2
      },
      {
        cuisine: cuisine3
      },
      {
        cuisine: cuisine4
      },
      {
        cuisine: cuisine5
      },
      {
        cuisine: cuisine6
      }
    ] 
    
  Mapped through them seperalty, styled in css so that titles appeared above images. Anchor tag now working on the image. 
  
  import {motion} from "framer-motion";
  import {useRef, useEffect, useState} from "react";
  import image from "../img/carouselArray"
  import {cuisineString} from "../img/carouselArray"
  import "../style/home.css";
  
  export const Carousel = () =&gt; {
  
      const [width, setWidth] = useState(0);
      const carousel = useRef();
  
      useEffect(() =&gt; {
          // console.log(carousel.current.scrollWidth, carousel.current.of
          setWidth(carousel.current.scrollWidth - carousel.current.offsetWidth)
      }, []);
  
      return (
          &lt;div className="carouselContainer"&gt;
          
          &lt;motion.div ref={carousel} className="carousel" whileTap={{cursor: "grabbing"}}&gt;
          &lt;motion.div drag="x"
          dragConstraints= {{ right: 0, left: -width}}
          className ="innerCarousel"&gt;
              &lt;div className="caroselRow"&gt;
                  {image.map(image =&gt;{
                      return(
                        &lt;motion.div className="item" key={image}&gt;
                            {/* &lt;h5&gt;Cuisine&lt;/h5&gt; */}
                            &lt;button className="btnImage"&gt;&lt;a href=""&gt;&lt;img className="itemImg" src={image} alt="Cuisine"/&gt;&lt;/a&gt;&lt;/button&gt;
                        &lt;/motion.div&gt;
                        
                      );
                  })}
                  &lt;/div&gt;
                  &lt;div className="caroselRow"&gt;
                   {cuisineString.map(({cuisine})=&gt;{
                      return(
                        &lt;motion.div className="itemTitle"&gt;
                           &lt;p className="itemTitleReturn" key={cuisine}&gt;{cuisine}&lt;/p&gt;
                        &lt;/motion.div&gt;
                      );
                  })}
                  &lt;/div&gt;
              &lt;/motion.div&gt;
              &lt;/motion.div&gt;
      
      
          &lt;/div&gt;
          
      );
      }</code></pre>
  </div>
  </div>
  </p>