navbar menu dynamic

[seenu27jidhin]

i am trying to do a dynamic menubar with id, label and link .but i got an error like

"Property 'id' does not exist on type '{ id: number; } | { label: string; } | { link: string; }'".

here is my code

in navbar.tsx

import { useState } from "react"; import "../App.css" interface NavBarProps { brandName: string; imageSrcPath: string; navItems: [{id:number},{label:string},{link:string}];

} function NavBar({ brandName, imageSrcPath, navItems }: NavBarProps) { const [selectedIndex, setSelectedIndex] = useState(-1);

return (

{brandName}

{navItems.map((items, index) => (
• setSelectedIndex(index)} > {items.label}
))}

Search

); }

export default NavBar;

in app.tsx

function App() { const items = [ { id:1, label:"Home",link:'/' }, {id:2, label:"Product",link:'/product'}, {id:3,label:"Contact",link:'/contact'}, ]; return (

) }

export default App

can you help me to figure out this problem.?

[seenu27jidhin]

i fixed that problem

in navbar.tsx

interface ItemList { id:number; label:string; link:string } interface NavBarProps { brandName: string; imageSrcPath: string; navItems: ItemList[]; }