0

I am creating a solitaire game in React. I have a Card component that renders a card to the screen based on the state of its suit, number etc. At the top of Card.js is a series of imports for image sources like so: import cardFrontTexture from '../assets/card_front.png'

I have many of these imports so I figured I would move them all to another JS file and call it CardImages.js. I changed Card.js to import CardImages.js instead.

But I am having trouble figuring out how to export all of the imported images inside of CardImages.js

Essentially, is there a way to export everything all imports in a file such that I don't have to import everything individually by name in Card.js? I want to avoid doing import { image1, image2, image3... } from './CardImages'; if possible.

// Card,js
...
import * as cardImages from './CardImages';
...

export class Card extends Component {
    render() {
        return (
            <div>
                <img
                    onClick={this.handleClick}
                    className=""
                    src={ cardImages.image1 } // This is what I figured would work
                />
                ...
            </div>
        );
    }
}

// CardImages.js
import image1 from '../../assets/image_1.png';
import image2 from '../../assets/image_2.png';
import image3 from '../../assets/image_3.png';
...

export ? // Not sure what to put here
Dakattack
  • 1
  • 2
  • Does this answer your question? [Importing multiple files in react](https://stackoverflow.com/questions/44607396/importing-multiple-files-in-react) – alramdein Sep 13 '20 at 00:02
  • Half of it. I understand now what to change in `CardImages.js`. But is it possible to import everything from `CardImages.js` like so: `import * as cardImages from './CardImages';`? – Dakattack Sep 13 '20 at 00:09
  • 1
    Turns out I can! Thanks for the help :) – Dakattack Sep 13 '20 at 00:20
  • btw, I don't believe that this is a good practice. Why don't you just import it on the `Card.js`.Because you still importing all of that images **one by one** on `CardImages.js` anyway – alramdein Sep 13 '20 at 05:42
  • I've seen this done before by other web developers as a way to reduce clutter in their component files. I suppose it isn't as useful here, but if I wanted to reuse the card images on another component I could just include `CardImages` instead of copy-pasting a long list of includes. But you're right in this scenario - it doesn't serve much of a purpose since `Card` is the only component using `CardImages`. This was more of an exercise for me to better understand imports and exports. – Dakattack Sep 13 '20 at 18:27

1 Answers1

0

I figured it out. Thank you Alif for pointing me in the right direction.

I changed CardImages.js to this:

export const image1 = require('../../assets/image_1.png');
export const image2 = require('../../assets/image_2.png');
export const image3 = require('../../assets/image_3.png');
...

And I left Card.js as shown in the original question. I was able to use import * as cardImages from './CardImages.js'; and avoid importing each export via its name.

Dakattack
  • 1
  • 2