Question 278030 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Passing props to child component is giving me RangeError in nextjs

I am new to Next.js.

I am trying to send the props to child component which is a response from api call. But when ever I try to add the props in the child component it is giving me RangeError: Maximum call stack size exceeded.

Here is the screenshot of error

enter image description here

Here is the code:

page.jsx

import styles from './page.module.css';
import EmployeeDashboardNavbar from './serverComponents/EmployeeNavbar';
import EmployeeDashboardContent from './serverComponents/employeeDashboardContent';

const EmployeeDashboard = () => {
  return (
    <div className={styles["emp-dashboard-top"]}>
      <div className={styles["emp-dashboard-body"]}>
        <EmployeeDashboardNavbar />
        <EmployeeDashboardContent />
      </div>
    </div>
  );
};

export default EmployeeDashboard;

EmployeeDashboardContent.jsx

import { findTaskswithDeptAdmin } from "@/actions/taskActions";
import EmpCards from "../clientComponents/employeeCard";
import styles from "./server.module.css";
import EmployeeCalendar from "../clientComponents/calendar";

const EmployeeDashboardContent = async () => {
  const tasksOfUser = await findTaskswithDeptAdmin({
    empId: "652a39fbfd78c72ec09f26b5",
  });
  const filteredTasks = tasksOfUser.filter((tk) => tk.completionStatus === "Assigned")
  console.log(filteredTasks);

  return (
    <>
      <div className={styles["emp-dash-main"]}>
        <div style={{ width: "100%", display: "flex" }}>
          <div className={styles["emp-dash-main-left"]}>
            <div>
              <div>
                <div className={styles["emp-header-nav"]}>
                  <div className={styles["emp-header"]}>
                    <h3>Krish</h3>
                  </div>
                </div>
                <EmpCards />
              </div>
              <div className={styles["emp-body"]}>
                <div className={styles["emp-meeting-schedule"]}>
                  <button className={styles["emp-dashboard-add-employee"]}>
                    Meeting Details
                  </button>
                </div>
                <div>
                  <table className={styles["emp-dash"]}>
                    <thead>
                      <tr className={styles["emp-table-head"]}>
                        <th>Task</th>
                        <th>Head</th>
                        <th>Department</th>
                        <th>Date</th>
                      </tr>
                    </thead>
                    <tbody>
                      {tasksOfUser
                        .filter((tk) => tk.completionStatus === "Assigned")
                        .map((task) => (
                          <tr
                            className={styles["emp-dashboard-table-data"]}
                            key={task._id}
                          >
                            <td>{task.taskName}</td>
                            <td>{task.deptId.name}</td>
                            <td>{task.adminId.adminName}</td>
                            <td>{task.deadline}</td>
                          </tr>
                        ))}
                    </tbody>
                  </table>
                </div>
                <EmployeeCalendar tasks={filteredTasks}/>
              </div>
            </div>
          </div>
          <div className={styles["emp-dash-main-right"]}>hiii</div>
        </div>
      </div>
    </>
  );
};

export default EmployeeDashboardContent;

EmployeeCalendar.jsx

"use client";

import Calendar from "react-calendar";
import 'react-calendar/dist/Calendar.css';

import styles from "./client.module.css";

const EmployeeCalendar = ({tasks}) => {
  console.log(tasks)
  return (
    <>
      <div
        className={`${styles["emp-calender"]} ${styles["react-calender"]}`}
        style={{ display: "grid", placeItems: "center" }}
      >
        {/* <div>
          <h4 style={{ cursor: "pointer", color: "red" }}>Today</h4>
        </div> */}
        <Calendar />
      </div>
    </>
  );
};

export default EmployeeCalendar;

Here is the data of filteredTasks

[
  {
    taskName: 'task 3',
    adminId: {
      adminName: 'Krish',
      email: '[email protected]',
      password: '123',
      document: 'PAN',
      __v: 0
    },
    deptId: { name: 'HR', __v: 0 },
    deadline: '2023-10-21',
    status: false,
    completedDate: '',
    completionStatus: 'Assigned',
    createdAt: '2023-10-23T12:27:33.523Z',
    updatedAt: '2023-10-23T12:27:33.523Z',
    __v: 0
  }
]

I have tried to send response statically, and magically it worked. But, I don’t why it is not working in dynamically rendered data.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I got the mistake in my code. The data which I was receiving from findTaskswithDeptAdmin function was not converted into the JSON, that's why I was getting the error.

    The main issue was that the data which was coming from mongoose was not in the form of string and to pass the data from one component to another component through props the data has to be the type of string.

    For reference I will attach the code of findTaskswithDeptAdmin function (I will share both the code, previous code of function when I was getting error and the code of function after the error was solved.

    findTaskswithDeptAdmin() (when error was stemming)

    export const findTaskswithDeptAdmin = async (query) => {
  try {
    const result = await Task.find(query);
    return result;
  } catch (error) {
    console.log(error);
    throw error;
  }
};

    findTaskswithDeptAdmin() (when the error was solved)

    export const findTaskswithDeptAdmin = async (query) => {
  try {
    const getTasks = async () => {
      const result = await Task.find(query);
      return result;
    };
    const actualData = await JSON.parse(JSON.stringify(await getTasks()));
    return actualData;
  } catch (error) {
    console.log(error);
    throw error;
  }
};

  2. 0

    I haven’t tested it out, but it looks like your filteredTasks inside EmployeeDashboardContent is recalculated frequently. Can you try to memoize the filteredTasks value?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search