How to create dynamic hyperlink (href) using React?

Question

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.

Abinesh Joyel · Accepted Answer · 2019-02-26 03:52:02Z

2

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

answered Feb 26, 2019 at 3:52

Abinesh Joyel

2,0932 gold badges17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IAspireToBeGladOS Over a year ago

That was exactly it. Thanks so much, I really appreciate it!

Collectives™ on Stack Overflow

How to create dynamic hyperlink (href) using React?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related