I am currently working on a tic tac toe web application. I encountered an issue when clicking the "Ver Ranking" button, as it displays a warning message that I'm unsure how to address:
Warning: Received NaN for the `children` attribute. If this is expected, cast the value to a string.
at td
at tr
at tbody
at table
at div
at div
at Component /./src/app/ranking/page.js:20:82)
The web app is being developed using Next.js 14 and the code in my page.js file is as follows:
"use client";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Button from "@/components/Button";
import { getRanking, updateRanking } from "@/lib/apiCalls";
const winCombs = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
export default function Home() {
// rest of the component's code...
}
I have also created a ranking page with the following code:
"use client";
import Button from "@/components/Button";
import { useState, useEffect } from "react";
import { getRanking } from "@/lib/apiCalls";
import { useRouter } from "next/navigation";
export default function Component() {
// rest of the ranking page component code...
}
The data displayed in the ranking table is fetched from a database using the getRanking method:
export const getRanking = async () => {
try {
// fetch request to retrieve ranking data...
} catch (error) {
console.log(error);
}
};
I have attempted to modify the Button component but the warning persists. Could the useEffect() in the ranking page be causing this issue? Any insights or suggestions would be greatly appreciated. Thank you!