Epic Next.js 14 Tutorial: Learn Next.js by building a real-life project part 3

2

Hi Paul,

I need a little help with header component. I’m getting the following TypeError after adding header component.

 
  ⨯ src/components/custom/Header.tsx (26:30) @ url
  ⨯ TypeError: Cannot read properties of undefined (reading 'url')
     at Header (./src/components/custom/Header.tsx:29:37)
     at stringify (<anonymous>)
 digest: "735238440"
   24 |       <Logo text={logoText.text}/>
   25 |       <div className="flex items-center gap-4">
 > 26 |         <Link href={ctaButton.url}><Button>{ctaButton.text}</Button></Link>
      |                              ^
   27 |       </div>
   28 |     </div>
   29 |   );

And here’s my Header.tsx code:

import Link from "next/link";
import { Logo } from "@/components/custom/Logo";
import { Button } from "@/components/ui/button";

interface HeaderProps {
  data: {
    logoText: {
      id: number;
      text: string;
      url: string;
    };
    ctaButton: {
      id: number;
      text: string;
      url: string;
    };
  };
}

export async function Header({ data }: Readonly<HeaderProps>) {
  const { logoText, ctaButton } = data;
  return (
    <div className="flex items-center justify-between px-4 py-3 bg-white shadow-md dark:bg-gray-800">
      <Logo text={logoText.text}/>
      <div className="flex items-center gap-4">
        <Link href={ctaButton.url}><Button>{ctaButton.text}</Button></Link>
      </div>
    </div>
  );
}

The logoText.text outputs just fine, only ctaButton has this issues. I doubled check the created component in Strapi to make sure it’s using the same model as logoText but can’t find what’s wrong?

Can you help me troubleshoot this?

Thank you.

1 Like