React - I have six files that export a variable and want all the variables to be exported from one file

Question

I have 6 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 each one as a const for example:

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

And then export these 6 const so I can use them as arrays in another file?

I have tried doing this but dont know if it is right

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

Answer 1

Another option is to have another file with these files, say constants.js , and then in that file:

// constants.js
import gastronomia from './gastronomia'
import deporte from './deporte'
import diversion from './diversion'
etc

export { gastronomia,  deporte, diversion, etc. }

Then in your target module, you can import them all in one line:

import { gastronomia,  deporte, diversion, etc. } from './constants.js'

It's a little more work up front, but you end up with one file managing your imports and exports, and in your target module which uses these constants, you just have one line importing them all. This is my preferred method, it keeps everything organized.

Edit :

You can stick all your constants in a single object at the end of the file where you declare them:

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`)); 

const todasLasCosas = {
  gastronomiaExperience: gastronomiaExperience,
  giftcardExperience: giftcardExperience,
  deporteExperience: deporteExperience,
  productosExperience,  // this is the same as saying 'productosExperience: productosExperience'
  diversionExperience,
  bellezaExperience 
}

export default todasLasCosas

Then in your target module:

import todasLasCosas from './todasLasCosas.js'

Notice the lack of curly braces in this import statement. When you import a default export (AKA unnamed export), you don't need the curly braces. Then in your file you can access things like this:

todaslasCosas.gastronomiaExperience
todaslasCosas.bellezaExperience 

Answer 2

to export many functions, objects from a file use named export,

in your scenario to export the functions in provider.jsx

export { gastronomiaExperience, deporteExperience } :

use names exports, for more detailed description have a look at https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export