Next.js Discord

Discord Forum

Getting error when attempting to render my component

Unanswered
Bucovina Shepherd Dog posted this in #help-forum
Open in Discord
Bucovina Shepherd DogOP
I have a little component that looks like this
"use client";
import { motion } from "framer-motion";
import InfoCard from "@/components/InfoCard/InfoCard";

type Props = {
  children: JSX.Element;
};

function EduCard({ children }: Props) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      transition={{ duration: 0.5, delay: 0.1 }}
      viewport={{ amount: 1, once: true }}
    >
      <InfoCard>{children}</InfoCard>
    </motion.div>
  );
}

EduCard.Title = InfoCard.Title;
EduCard.Text = InfoCard.Text;
EduCard.Footer = InfoCard.Footer;

export default EduCard;

When I attempt to call it in this way everything works.
            <EduCard>
              <p>123</p>
            </EduCard>

However as soon as I try to pull out another component from within it in this way
            <EduCard>
              <EduCard.Title title="CS50X Certificate" />
            </EduCard>

I recive the following error can any one help me out why is this happening?

11 Replies

aardani
does the error persists when commenting <EduCard>
does the error persists when commenting {children}
does the error persists when commenting <InfoCard> and go straight to {children}
@aardani does the error persists when commenting <InfoCard> and go straight to {children}
Bucovina Shepherd DogOP
The error is coused when I call
EduCard.Title or anything else inside of EduCard
Basicly
1. does the error persists when commenting <EduCard>? No
2. does the error persists when commenting {children}? No
3. does the error persists when commenting <InfoCard> and go straight to {children} No
aardani
ah this is the cause of the error
I haven't tried this kind of pattern before
@aardani I haven't tried this kind of pattern before
Bucovina Shepherd DogOP
Yp it works in here trought so I'm not sure what is going on
import title from "./Title";
import text from "./Text";
import footer from "./Footer";
import Link from "next/link";

type Props = {
  children: React.ReactNode;
  link?: string;
};

function InfoCard({ children, link }: Props) {
  return link ? (
    <Link href={link}>
      <div
        className={`rounded-xl p-6
            bg-secondary dark:bg-dark-secondary
            shadow-2xl
            hover:shadow-[3px_3px_5px_0px_rgba(0,0,0,0.25)_inset,-2px_-2px_4px_0px_rgba(0,0,0,0.25)_inset;]
            border-4
            border-secondary dark:border-dark-secondary
            transition-shadow`}
      >
        {children}
      </div>
    </Link>
  ) : (
    <div
      className={`rounded-xl p-6
    bg-secondary dark:bg-dark-secondary
    shadow-2xl`}
    >
      {children}
    </div>
  );
}

InfoCard.Title = title;
InfoCard.Text = text;
InfoCard.Footer = footer;

export default InfoCard;
Bucovina Shepherd DogOP
Update removing "use client"; solved the problem however I need it to be a client component so I'm not sure should I report it as a bug or what is going on?
aardani
I guess its just an incompatible pattern
There are still other ways to get the Title Text Footer right