Why constant folders data are not fetching by map() in react.js ? How to fetch external .js data into another using map()?

Question

I'm working on a project and i want to simplify the .js part by calling the common text files. I made an index.js file under constants folder and i export all texts which is required multiple times so no need to type every time. Now i want to import in Navbar.js or Hero.js but i can't fetch that constants data by using the map().

Here the folder structure FYI :

Here is my code :

constants > index.js

import { heroslider1, heroslider2, heroslider3, heroslider4 } from "../assets";


export const heroSlider = [
  {
    subtitle: "subtitle-1",
    title1: "title-1",
    title2: "title-2",
    description: "description-1",
    btnText: "btn-text",
    image: heroslider1,
  },
  {
    subtitle: "subtitle-2",
    title1: "title-1",
    title2: "title-2",
    description: "description-2",
    btnText: "btn-text",
    image: heroslider2,
  },
  {
    subtitle: "subtitle-3",
    title1: "title-1",
    title2: "title-2",
    description: "description-3",
    btnText: "btn-text",
    image: heroslider3,
  },
  {
    subtitle: "subtitle-4",
    title1: "title-1",
    title2: "title-2",
    description: "description-4",
    btnText: "btn-text",
    image: heroslider4,
  },
];

components > Hero.jsx

import React, { useState } from "react";
import { heroIcon, heroslider1, heroslider2, heroslider3 } from "../assets";
import { IonIcon } from "@ionic/react";
import { chevronBack, chevronForward } from "ionicons/icons";
import { heroSlider } from "../constants";

const HeroSliderCard = ({
  image,
  subtitle,
  title1,
  title2,
  description,
  btnText,
}) => {
  <div>
    <ul className="hero_slider" >
      <li className="hero_slider_item active" >
        <div className="hero_slider_bg">
          <img
            src={image}
            alt="slider"
            width={1880}
            height={950}
            className="global_img_cover"
          />
        </div>

        <p className="label_2 global_section_subtitle slider_reveal">
          {subtitle}
        </p>

        <h1 className="display_1 hero_title slider_reveal">
          {title1}               
        </h1>

        <p className="body_2 hero_text slider_reveal">{description}</p>

        <a href="#menu" className="global_btn btn_primary slider_reveal">
          <span className="text text_1">{btnText}</span>

          <span className="text text_2" aria-hidden="true">
            {btnText}
          </span>
        </a>
      </li>
    </ul>
  </div>;
};

const Hero = () => {

  return (
    <div className="hero global_text_center" aria-label="home" id="home">
      {heroSlider.map((image, index) => (
        <HeroSliderCard 
          key={image.image} 
          index={index} {...image} 
        />
      ))}


      <button
        className="hero_slider_btn prev"
        aria-label="slide to previous"
        data-prev-btn
      >
        <IonIcon icon={chevronBack} />
      </button>

      <button
        className="hero_slider_btn next"
        aria-label="slide to next"
        data-next-btn
      >
        <IonIcon icon={chevronForward} />
      </button>

      <a href="#book" className="hero_btn has_after">
        <img src={heroIcon} alt="booking icon" width={48} height={48} />

        <span className="label_2 global_text_center span">Book A Table</span>
      </a>
    </div>
  );
};

export default Hero;

What i missed here ?? Let me know.

Thank You.

Answer 1

Do this :

import { heroSlider } from "../constants/index.js";