Currently, I am in the process of learning typescript and attempting to create a navigation bar. However, I encountered an error message stating "Unexpected token header. Expected jsx identifier".
I am a bit puzzled by this issue. Could someone kindly provide some guidance on where the problem might lie?
This is the content of Navbar.tsx file:
import Link from "next/link";
import React, { useState } from "react";
import NavItem from "./NavItem";
export interface INavbar {
navActive: boolean;
}
const Navbar: React.FC<INavbar> = (className, ...navProps) => {
const [navActive, setNavActive] = useState(null);
const [activeIdx, setActiveIdx] = useState(-1);
const MENU_LIST :{ text: string, href: string}[] = [
{ text: "Home", href: "/" },
{ text: "About Us", href: "/about" },
{ text: "Contact", href: "/contact" },
];
return (
<header>
<nav className={`nav`}>
<Link href={"/"}>
<a>
<h1 className="logo">KT</h1>
</a>
</Link>
<div
onClick={() => setNavActive(!navActive)}
className={`nav__menu-bar`}
>
</div>
<div className={`${navActive ? "active" : ""} nav__menu-list`}>
{MENU_LIST.map((menu, idx) => (
<div
onClick={() => {
setActiveIdx(idx);
setNavActive(false);
}
key={menu.text}
>
<NavItem active={activeIdx === idx} {...menu} />
</div>
)
</div>
</nav>
</header>
}
export default Navbar;
In addition, here is the content of Navitem.tsx file:
import Link from 'next/link';
export interface INavItem {
text: string;
href: string;
active: boolean;
}
const NavItem: React.FC<INavItem> = ({ text, href, active }) => {
return (
<Link href={href}>
<a className={`nav__item ${active ? 'active' : ''}`}>{text}</a>
</Link>
);
};
export default NavItem;