I have six react files each exports an array and I want to reduce the six files to one

Question

I have 6 files like bellow and I want to reduce the six file to one single file called providers and then I can import each array to other files.

These are my six files

gastronomia.jsx

import _range from 'lodash/range';
// eslint-disable-next-line global-require, import/no-dynamic-require
export default _range(1, 5).map(i => require(`assets/experiences/gastronomia/${i}.png`));

deporte.jsx

import _range from 'lodash/range';
// eslint-disable-next-line global-require, import/no-dynamic-require
export default _range(1, 3).map(i => require(`assets/experiences/deporte/${i}.png`));

diversion.jsx

import _range from 'lodash/range';
// eslint-disable-next-line global-require, import/no-dynamic-require
export default _range(1, 4).map(i => require(`assets/experiences/diversion/${i}.png`));

giftcard.jsx

import _range from 'lodash/range';
// eslint-disable-next-line global-require, import/no-dynamic-require
export default _range(1, 12).map(i => require(`assets/experiences/giftcard/${i}.png`));

belleza.jsx

import _range from 'lodash/range';
// eslint-disable-next-line global-require, import/no-dynamic-require
export default _range(1, 3).map(i => require(`assets/experiences/belleza/${i}.png`));

productos.jsx

import _range from 'lodash/range';
// eslint-disable-next-line global-require, import/no-dynamic-require
export default _range(1, 2).map(i => require(`assets/experiences/productos/${i}.png`));

And I want to put all of these into one file providers.jsx for example something like this:

import _range from 'lodash/range';
// eslint-disable-next-line global-require, import/no-dynamic-require

const gastronomiaExperience =  _range(1, 5).map(i => require(`assets/experiences/gastronomia/${i}.png`));

const giftcardExperience = _range(1, 12).map(i => require(`assets/experiences/giftcard/${i}.png`));

const deporteExperience =  _range(1, 3).map(i => require(`assets/experiences/deporte/${i}.png`));

const productosExperience = _range(1, 2).map(i => require(`assets/experiences/productos/${i}.png`));

const diversionExperience = _range(1, 4).map(i => require(`assets/experiences/diversion/${i}.png`));

const bellezaExperience = _range(1, 3).map(i => require(`assets/experiences/belleza/${i}.png`)); 

export default {gastronomiaExperience, giftcardExperience, deporteExperience, productosExperience, diversionExperience, bellezaExperience};

I dont know what I am doing wrong but this but it gives me a error when I try to map over the array in another component

TypeError: popoverCategory.map is not a function

This worked fine when I had each in there own file

My file structure is

src

 assets
  clientes
    clientes images
  experiences
     experiences 6 images 
     file belleza
      1.png
      2.png
     file deporte
      1.png
      2.png
     file gastronomia
        ]1.png
        2.png
        3.png
        4.png
      rest of experience files with images

components
  Experiences.jsx
  Other components are in here
data
  clientes.jsx
  providers.jsx
  this is where I use to have all the data files(gastronomia.jsx deporte.jsx ect)
pages
  Home.jsx
root
  App.jsx
  Providers.jsx
  strore.jsx
  theme.jsx
utils
  ga.jsx
  enviroment.jsx

Answer 1

You need to export them like:

import _range from 'lodash/range';
// eslint-disable-next-line global-require, import/no-dynamic-require

export const gastronomiaExperience =  _range(1, 5).map(i => require(`assets/experiences/gastronomia/${i}.png`));

export const giftcardExperience = _range(1, 12).map(i => require(`assets/experiences/giftcard/${i}.png`));

export const deporteExperience =  _range(1, 3).map(i => require(`assets/experiences/deporte/${i}.png`));

export const productosExperience = _range(1, 2).map(i => require(`assets/experiences/productos/${i}.png`));

export const diversionExperience = _range(1, 4).map(i => require(`assets/experiences/diversion/${i}.png`));

export const bellezaExperience = _range(1, 3).map(i => require(`assets/experiences/belleza/${i}.png`)); 

And then import it like:

import { bellezaExperience } from '../Your_File_Path';

Hope this works for you.