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",
},
];
You add a tag a in the link like that :
<link href....>
<a>
<image>
<p> text </p>
</a>
</link>
I often get this error too...