CODEWITHSUNDEEP
htmlreactjsjsx
RamAlx
RamAlx

Reputation: 7334

Transform a plain HTML script to jsx

I'm struggling with a quite simple issue here and I need some help. My HTML script is this 

<nav class="mainNav">
  <ul>
    <li><a href="#" class="active">δσαδσαδσαδσα</a></li>
    <li><a href="#">δσαδσαδσαδσα</a></li>
  </ul>
</nav>

I want to write it using the Link tag from react-router so I'm writing

<ul className="main-nav">
  <NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink>
  <NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink>
</ul>

where NavLink is a simple widget with this code:

export default function (props) {
  return (
    <Link
      {...props}
    />);
}

What am I missing? My layout is not the same as the HTML script

Upvotes: 2

Views: 62

Answers (2)

codejockie
codejockie

Reputation: 10864

You probably need to place your NavLink component inside the li tags.

<nav class="mainNav">
  <ul>
    <li><NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink></li>
    <li><NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink></li>
  </ul>
</nav>

Upvotes: 1

Dyo
Dyo

Reputation: 4464

Do you mean replacing your <a /> links with <NavLink /> ?

<nav className="mainNav">
  <ul>
    <li>
      <NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink>
    </li>
    <li>
      <NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink>
    </li>
  </ul>
</nav>

Upvotes: 1

Related Questions