How to transfer/populate a data to another component in nextJS

Question

I am building an application on Nextjs and tailwindcss

Problem

Simply I have a table of 4 columns with each row having a data in 3 colums and the last column contains the Update button. The data in each row are populated with the help of the map function like this.

const data = [
  {
    couponCode: "generic_1001",
    description: "Generic Coupons",
    redeemSteps: "NA",
    tnc: "free",
    type: "GENERIC",
    couponUsage: "ANY",
    status: "ACTIVE"
  },
  {
    couponCode: "generic_1002",
    description: "Generic Coupons",
    redeemSteps: "NA2",
    tnc: "free",
    type: "GENERIC_COHERT",
    couponUsage: "USER_LEVEL",
    status: "INACTIVE"
  },
  {
    couponCode: "custom_1003",
    description: "Custom Coupons",
    redeemSteps: "NA3",
    tnc: "free",
    type: "CUSTOM",
    couponUsage: "OVERALL",
    status: "ACTIVE"
  },
]
.
.
.
.
.
<table className="table-auto w-full text-left whitespace-no-wrap">
              <thead>
                <tr>
                  <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tl rounded-bl">CouponCode</th>
                  <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Type</th>
                  <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Usage</th>
          
                  <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">UpdateAll</th>
                </tr>
              </thead>
              <tbody>
                {
                  data.map((item) => {
                    return (
                      <>
                        <tr key={item.couponCode}>
                          <td className="px-4 py-3 text-gray-800">{item.couponCode}</td>
                          <td className="px-4 py-3">{item.type}</td>
                          <td className="px-4 py-3">{item.couponUsage}</td>
                          
                          <td className="w-10 text-center">
                            <button
                              onClick={()=>handleUpdate(item)}
                              className="flex mx-auto text-white text-base bg-indigo-600 hover:bg-indigo-800 focus:ring-4 focus:outline-none focus:ring-indigo-300 font-medium rounded-lg px-2 py-1 text-center"
                            >
                              Update
                            <!-- what to write in handleUpdate(item) -->
                            </button>
                          </td>
                        </tr>
                       

                      </>
                    )
                  })

                }
              </tbody>
            </table>

What I want

Now I want to transfer the item data as a prop to another component I had built i.e. updateCoupon.js. And when I go to the updateCoupon page , I am able to see the item data on that page.

/pages/updateCoupon.js

import React, { useState } from "react";
import { useRouter } from "next/router";

const UpdateCoupon = ({item}) => {
 

  console.log("items = ", items);

  return (
    <>
      <section className="text-gray-600 body-font banner02">
        <div>

         {item}
        </div>
      </section>

    </>
  );
};

export default UpdateCoupon;

What I tried

I tried this

const handleUpdate = (item) => {
    <Link href="/updatecoupon">
      <UpdateCoupon item={item} />
    </Link>
  }

but its not correct.

How can I populate the data to another component.

Answer 1

You need to use query params of next/router. You can send query parameters from your table like this:

import { useRouter } from 'next/router';

const router = useRouter();
const handleUpdate = (item) => {
    router.push(
      {
        pathname: '/updatecoupon',
        query: { item: JSON.stringify(item) },
      },
      undefined,
      { shallow: true }
    );
};

And then, read the parameters on /pages/updatecoupon.js like this:

import { useRouter } from 'next/router';

const router = useRouter();
const item = router.query.item ? JSON.parse(router.query.item) : {};

You can take a look at this stackblitz project for a live working example of this approach.