Tutorial guidance. QueryNavLink

[FightTheByte]

Can someone please help me understand this. When i replace my previous Navlink, it breaks the code because i'm not sure what parameters i'm supposed to enter. Also i've never seen NavLink with an unassigned object in it, what ...props are being entered? how do i utilise this in the code? The input seem's to be an object or destructuring. The tutorial has been clear and concise up until this point, been stuck for hours lol
I tried entering in the URL destination, as the "to" parameter, inside and outside an object, no difference.
Could someone please generally explain what is happening here and how to utilise it. It's supposed to achieve permenance, for the Query string in the href so when i click an option in the nav bar, it doesn't reset the search.

function QueryNavLink({ to, ...props }) { let location = useLocation(); return <NavLink to={to + location.search} {...props} /> }

Here it is in context

<input value={searchParams.get("filter") || ""} onChange={(event) => { let filter = event.target.value; if (filter) { setSearchParams({ filter }); } else { setSearchParams({}); } }} /> {invoices .filter((invoice) => { let filter = searchParams.get("filter"); if (!filter) return true; let name = invoice.name.toLowerCase(); return name.startsWith(filter.toLowerCase()); }) .map((invoice) => ( QueryNavLink({/invoices/${invoice.number}})

[kiliman]

As I replied in Discord

They basically want you to replace the <NavLink/> component with your new <QueryNavLink/> component. No other changes needed. Remember components aren't regular functions. You invoke them via JSX and pass props.

.map((invoice) => (
  <QueryNavLink
    style={({ isActive }) => ({
      display: "block",
      margin: "1rem 0",
      color: isActive ? "red" : "",
    })}
    to={`/invoices/${invoice.number}`}
    key={invoice.number}
  >
    {invoice.name}
  </QueryNavLink>
))}

[FightTheByte]

Hey! Yeah, thank you very much for your help. I posted this before you answered and went to sleep not long after the answer. I'll leave this up as it might help someone else. Thank you :D .

Up until this point, i've never seen a spread operator used in a component like that and for some reason it broke my brain and i forgot it is still a component. Just a bad day where my comprehension failed me.