0

I'm new to React (especially Typescript) and I was wondering how to pass these interface props correctly to this Navbar component in my main App?

interface HeaderResponsiveProps {
  links: { link: string; label: string }[];
}
export default function Navbar({ links }: HeaderResponsiveProps) {

import Navbar from './components/Navbar'

export default function App() {
  return (

      <Navbar links={???}/>
  );
}
David Scholz
  • 8,421
  • 12
  • 19
  • 34
kcrutch
  • 1
  • 2

1 Answers1

0

You have to pass it inside your Navbar component, like this:

function Navbar(props: HeaderResponsiveProps ) { [your component] }

Alternativelly using destructure would be like:

function Navbar({ links }: HeaderResponsiveProps ) { [your component] }

Emílio Gularte Kipper
  • 58
  • 7
  • Hello, thanks for your response! That's how I have it declared, but I'm confused about how to initialize the component with props in my main App. – kcrutch Aug 16 '22 at 19:25
  • 1
    The way you've declared the interface means that it should start with something like ``, i don't know if was about this you were wondering – Emílio Gularte Kipper Aug 17 '22 at 11:53
  • Makes sense now, I wasn't using the array syntax correctly. That's exactly what I was looking for, thank you. – kcrutch Aug 23 '22 at 19:15