Export Images

Here, we update our ImageData.js file, import the images from the images folder in the ImageData.js file, and export the cardImages array of objects with the src and matched properties.

Add images

Here’s how to import the images:

import BHUTAN from "./images/flag-of-Bhutan.png";
import INDIA from "./images/flag-of-India.png";
import CHINA from "./images/flag-of-China.png";
import NEPAL from "./images/flag-of-Nepal.png";
import PAKISTAN from "./images/flag-of-Pakistan.png";
import SRILANKA from "./images/flag-of-Sri-Lanka.png";

Export images

We’ll now define a cardImages variable that contains an array of objects with the src and matched properties. The src property contains the name of our image, such as NEPAL or SRILANKA, while matched is a boolean variable that will be explained and used later in the project. The snippet below demonstrates how to export the cardImages variable.

export const cardImages = [
  { src: INDIA, matched: false },
  { src: SRILANKA, matched: false },
  { src: PAKISTAN, matched: false },
  { src: CHINA, matched: false },
  { src: NEPAL, matched: false },
  { src: BHUTAN, matched: false }
];

Import the cardImages array

We’ll now import cardImages in the App.js file using the code shown in the following snippet:

import { cardImages } from "./ImageData/ImageData";

Combining all of the code snippets above produces the following: