Hacker News Reader

Comment by thomasfromcdnjs | Hacker News Reader

An easy example which is used in the most basic menus is selecting the active link.

If you were to do it as the post author states, it would look like this (bad)

    <ul>
      <li><Link active={'/home' === window.location.pathname} to="/home">Home</Link></li>
      <li><Link active={'/about' === window.location.pathname} to="/about">About</Link></li>
      <li><Link active={'/contact-us' === window.location.pathname} to="/contact-us">Contact Us</Link></li>
    </ul>

View on HN

A simple solution is to create a component that does what you want which retains the benefit of being explicit.

Which is even more effort, and isn't better than the original solution.

What if you want to render your navbar differently depending on the context? Eg. on desktop it's a flexbox at the top of the page, and on mobile it's an <ul> in the hamburger menu?

> What if you want to render your navbar differently depending on the context?

Uhm maybe ...use ...context?

So you'd rather write twice the code and use React contexts for this simple feature just to avoid iterating through an array?

Why would it be twice the code? Depending on what it is exactly that you want, you might just add 4 lines of creating a context, passing a value to a provider, checking the value of that context. And in return you get a most readable description of the user interface:

  <Menu isHamburger={isHamburger}>
    <NavLink to="/a">A</NavLink>
    <NavLink to="/b">B</NavLink>
    <DownloadLink file="/c.txt">Download C</NavLink>
    <InfoBox>All services up-and-running</InfoBox>
    <NavLink to="/signOut">Sign out</NavLink>
  </Menu>

Heck, you might not even need a context to accomplish this.

It is not about avoiding iterating through an array either. The objective is the readable description of the user interface. It is to improve orientation and maintainability.

Reply on news.ycombinator.com