How to Iterate Array Object for Travel Package List Using React.js

In any web application, especially travel-related apps, displaying a list of items such as travel packages. When working with React and Next.js, you'll frequently deal with array objects containing data that needs to be displayed dynamically in the UI. In this article, we will explore how to iterate an array of travel packages and display the data using Next.js.

1. Create an Array of Travel Packages

Here I created an array object that holds information about different travel packages.

const packages = [
  {
    bgImg: "venice.jpg",
    name: "City of Canal",
    location: "Venice",
    price: "$1230.00",
  },
  {
    bgImg: "moscow.jpg",
    name: "The Heritage City",
    location: "Moscow",
    price: "$1430.00",
  },
  {
    bgImg: "paris.jpg",
    name: "City of Love",
    location: "Paris",
    price: "$1030.00",
  },
  {
    bgImg: "mumbai.jpg",
    name: "City of Dreams",
    location: "Mumbai",
    price: "$830.00",
  },
  {
    bgImg: "tokyo.jpg",
    name: "City of Anime",
    location: "Tokyo",
    price: "$2830.00",
  },
  {
    bgImg: "beijing.jpg",
    name: "The Forbidden City",
    location: "Beijing",
    price: "$1930.00",
  },
];

2. Creating a React Component to Display Travel Packages

Next, I’ll create a functional React component to display the list of travel packages. The goal is to iterate over the packages array and render each item in a card format by calling the PackageDetails component.

import { Package } from "@/models/package";

const PackageDetails = ({ pkgInfo }: { pkgInfo: Package }) => {
  return (
    <aside
      className="group w-1/3 bg-cover bg-center"
      style={{ backgroundImage: `url(/${pkgInfo.bgImg})` }}
    >
      <div className="opacity-0 group-hover:opacity-100 transition-all delay-150 bg-black bg-opacity-75 w-full h-[550px] flex justify-center items-center flex-col">
        <h3 className="uppercase text-center text-4xl font-semibold text-white">
          {pkgInfo.name}
          <br />
          <small className="text-xl tracking-widest font-normal">
            {pkgInfo.location}
          </small>
        </h3>
        <h4 className="text-3xl my-6 text-white font-semibold">
          {pkgInfo.price}
        </h4>
        <a
          href=""
          className="bg-green text-white font-semibold px-5 py-1.5 rounded-full"
        >
          Book Now
        </a>
      </div>
    </aside>
  );
};

export default PackageDetails;

3. Array Iteration using map()

Now, iterate our packages array object using map() function to get individual object and pass it to PackageDetails component using props.

<div className="flex flex-wrap mt-8">
            {packages.map((pkg: Package, i: number) => {
              return <PackageDetails key={i} pkgInfo={pkg} />;
            })}
</div>

Explanation of Code

• I have defined an array of travel packages that contains the data for each package (package image and location).

• Using the map() function, I iterate over this array and create a card for each package.

• Each card includes an image and location about the travel package.

• A key is assigned to each card using packages array index to help React efficiently manage updates and rendering.

Conclusion

In this article, I covered how to iterate an array object and display a list of travel packages using Next.js and React.js components. The example illustrated how to use the map() function to render components dynamically based on an array of data. With this knowledge, you can now display dynamic data in your projects and create more sophisticated user interfaces for applications like booking systems, e-commerce sites, or content libraries.