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?
2
Answers
I think you can implement this with
Math.random()
function of javascriptI would do this:
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.
In case you want to add a button to make the content change: