Search code examples
reactjsjsxreactstrap

How to create dynamic hyperlink (href) using React?

Completely new to React, so please forgive my ignorance.

Using ReactStrap for this example. I'm attempting to define {url} dynamically, to where it's defined under src/components in its own jsx file:

const NavLink = ({ url },{ children }) => (
  <RSNavLink href={url}>
    {children}
  </RSNavLink>
);

but when I call the component elsewhere, I can insert whatever hyperlink I'd like:

<NavLink href="/">Hello, World!</NavLink>

I'm not able to find documentation specific to what I'm looking for (or at least, I may not be searching for the right thing). If anyone could point me in the right direction, it'd be much appreciated.

Solution

  • In NavLink Component you are wrongly destructing props value and give exactly same name as props. change it like this 

    const NavLink = ({ url ,children }) => (
  <RSNavLink href={url}>
    {children}
  </RSNavLink>
);

 <NavLink url="#">
     Hello World
 </NavLink>

    check demo in stackblitz