Display and shuffle an array in Next.js

I’d like to create a single "Card" component containing some content like title, subtitle, etc picked from a data.js file which contains an array with all these elements. What I want to achive is, it must changes on every refresh giving a different result from the array picked randomly.

For the moment, I could display the single Card element using .map and .slice, but as I said, I’d like to make it changes on every refresh.

Card.js:

import React from "react";
import { curses } from "@/utils/curses";

function Card({ id, curse, russo, trad }) {
  return (
    <div className="flex text-center items-center h-[300px] p-3 bg-card">
      <div className="h-[280px] border-2 border-black p-4">
        <h1 className="font-bold p-4 text-4xl">{curse}</h1>
        <p>Russian: {russo} </p>
        <p>Meaning: {trad} </p>
      </div>
    </div>
  );
}

export default Card;

page.js:

"use client";

import Card from "./components/Card";

import { useEffect, useState } from "react";
import { curses } from "@/utils/curses";

const inter = Inter({ subsets: ["latin"] });

export default function Home() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const loadCurse = curses;
    setData(loadCurse);
  }, []);

  return (
    <main className="flex items-center justify-center h-screen">
      <div>
        {data.slice(0, 1).map((item, id) => {
          return (
            <Card
              key={id}
              curse={item.curse}
              russo={item.russo}
              trad={item.trad}
            />
          );
        })}
      </div>
    </main>
  );
}

data.js:

export const curses = [
  {
    id: "1",
    curse: "Curse 1",
    russo: "",
    trad: "",
  },
  {
    id: "2",
    curse: "Curse 2",
    russo: "XYZ",
    trad: "",
  },
  {
    id: "3",
    curse: "Curse 3",
    russo: "AAA",
    trad: "",
  },
  {
    id: "4",
    curse: "Curse 4",
    russo: "",
    trad: "",
  },
  {
    id: "5",
    curse: "Curse 6",
    russo: "",
    trad: "",
  },
  {
    id: "6",
    curse: "Curse 7",
    russo: "",
    trad: "",
  },
  {
    id: "7",
    curse: "Curse 8",
    russo: "",
    trad: "",
  },
  {
    id: "8",
    curse: "Curse 9",
    russo: "",
    trad: "",
  },
  {
    id: "9",
    curse: "Curse 10",
    russo: "",
    trad: "",
  },
];

How can I achieve this?

>Solution :

I would do this:

import Card from "./components/Card";

import { useEffect, useState } from "react";
import { curses } from "@/utils/curses";

const inter = Inter({ subsets: ["latin"] });

export default function Home() {
  const [data, setData] = useState();

  useEffect(() => {
    setData(curses[Math.floor(Math.random() * curses.length)]);
  }, []);

  return (
    <main className="flex items-center justify-center h-screen">
      <div>
        {data && (
            <Card
              key={data.id}
              curse={data.curse}
              russo={data.russo}
              trad={data.trad}
            />
        )}
      </div>
    </main>
  );
}

EDIT keep in mind if you want to generate another card under any event without refreshing your browser page you can place the code in the effect into that event.