I'm implementing a header from a GatsbyJS project into NextJS project and get the following error message:
"Error: Failed prop type: The prop href expects a string or object in <Link>, but got undefined instead."
When removing the following from the header.jsx it does not provide any error messages:<MenuButton item={{ icon: "/images/icons/hamburger.svg" }} />
Can you guide me on what I'm doing wrong?
This is my header.jsx file:
import React, { useEffect, useRef, useState } from "react";import styled from "styled-components";import Link from "next/link";import { menuData } from "../../data/menuData";import MenuButton from "../buttons/MenuButton.jsx";import Image from "next/image";import MenuTooltip from "../tooltips/MenuTooltip";export default function Header() { const [isOpen, setIsOpen] = useState(false); const ref = useRef(); const tooltipRef = useRef(); function handleClick(event) { setIsOpen(!isOpen); event.preventDefault(); } function handleClickOutside(event) { if ( ref.current && !ref.current.contains(event.target) && !tooltipRef.current.contains(event.target) ) { setIsOpen(false); } } useEffect(() => { document.addEventListener("mousedown", handleClickOutside); return () => { document.removeEventListener("mousedown", handleClickOutside); }; }, []); return (<Wrapper><Link href="/"><Logo><Image src="/images/logos/logo.png" alt="Logo" width={120} height={100} /></Logo></Link><MenuWrapper count={menuData.length} ref={ref}> {menuData.map((item, index) => (<MenuButton key={index} item={item} /> ))}<HamburgerWrapper onClick={(event) => handleClick(event)}><MenuButton item={{ icon: "/images/icons/hamburger.svg" }} /></HamburgerWrapper></MenuWrapper><div ref={tooltipRef}><MenuTooltip isOpen={isOpen} /></div></Wrapper> );}This is my menuTooltip.jsx file:
import React from "react";import styled from "styled-components";import { tooltipData } from "../../data/menuData";import MenuButton from "../buttons/MenuButton";export default function MenuTooltip(props) { const { isOpen } = props; return (<Wrapper isOpen={isOpen}> {tooltipData.map((item, index) => (<MenuButton key={index} item={item} /> ))}</Wrapper> );}This is my MenuButton.jsx file:
import React from "react";import styled from "styled-components";import Link from "next/link";import { Caption } from "../styles/TextStyles";export default function MenuButton(props) { const { item } = props; return (<Link href={item.link} onClick={props.onClick} key={props}><MenuItem hasTitle={!item.title ? false : true}><img src={item.icon} /> {item.title}</MenuItem></Link> );}This is my menuData.jsx file:
export const menuData = [ { title: "Learn", icon: "/images/icons/learner02_dm.svg", link: "/learn" }, { title: "Articles", icon: "/images/icons/article_light.svg", link: "/articles", }, { title: "Community", icon: "/images/icons/community_light.svg", link: "/community", }, { title: "Entrepreneurs", icon: "/images/icons/business02_light.svg", link: "/entrepreneurs", },];export const footerMenuData = [ { title: "Learn", icon: "/images/icons/learner02_dm.svg", link: "/learn" }, { title: "Articles", icon: "/images/icons/article_light.svg", link: "/articles", }, { title: "Community", icon: "/images/icons/community_light.svg", link: "/community", }, { title: "Entrepreneurs", icon: "/images/icons/business02_light.svg", link: "/entrepreneurs", }, { title: "Updates", icon: "/images/icons/calendar_light.svg", link: "/updates", }, { title: "Help", icon: "/images/icons/help_light.svg", link: "/help", },];export const tooltipData = [ { title: "Learn", icon: "/images/icons/learner02_dm.svg", link: "/learn" }, { title: "Articles", icon: "/images/icons/article_light.svg", link: "/articles", }, { title: "Community", icon: "/images/icons/community_light.svg", link: "/community", }, { title: "Entrepreneurs", icon: "/images/icons/business02_light.svg", link: "/entrepreneurs", },];