CODEWITHSUNDEEP
javascriptreactjsnext.js
Xenon M. Bird
Xenon M. Bird

Reputation: 58

Nextjs error when passing prop from server component to client component

I am fetching data from database and rendering it through a client component (because it will be added useState) but it's getting error only when passing prop. i have no Idea what's going on.

'use server'

import { Exam } from '@/db/models/exam';
import { ExamPaper } from './client-exam-paper';

const ExamPage = async ({ params }) => {
  const exam = await Exam.findById(params.examId);

  // client component 
  return <ExamPaper exam={exam} />; // error
  return <ExamPaper />; // okay
};

export default ExamPage;

./client-exam-paper page is

'use client';

export function ExamPaper() {
  return <div>asdfghjk</div>;
}

Error is

Error: Maximum call stack exceeded

Upvotes: 1

Views: 68

Answers (1)

Xenon M. Bird
Xenon M. Bird

Reputation: 58

In my code findById is returning a circular object. I just had to make it plain object to pass as props with .lean() method.

'use server'

import { Exam } from '@/db/models/exam';
import { ExamPaper } from './client-exam-paper';

const ExamPage = async ({ params }) => {
  const exam = await Exam.findById(params.examId).lean();   // this is the change 

  return <ExamPaper exam={exam} />;
};

export default ExamPage;

Thanks to @JulioCesarCervantesMartinez

Upvotes: 1

Related Questions