Hacker News Reader

Hacker News

Comment by namanyayg | Hacker News Reader

Full thread

namanyayg

The author chose a contrived example with that simplistic nav with just two properties.

The array pattern is much more useful when data is more complex and has multiple properties, nesting, etc.

Still, one of the big benefits that can't be ignored is that jsx looks ugly and the array looks much cleaner.

View on HN

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>

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.

Not too strongly opinionated on this one either way but I'd say the array looks cleaner when you can actually see the array; when it's derived from a function or is using much more complicated data it can be quite a bit harder to pull useful info from and can be quite a bit easier for a junior to mess up.

Some of the worst JSX related code I've seen has involved people trying to build up arrays for data like this.

Not to mention, that you might want/need your routing for more than just a navigation display.. but for determining routing, named routes and other links in an application.

I really don't mind JSX in terms of syntax. That said, I've used ASP.Net Webforms, VB.Net (XML Literal Notation) and ActionScript (e4x XML Literal Notation) and others. Even developed a UI toolkit similar to what React became (a decade before), but only supported Netscape (e4x).

Thought the same thing.

That array list might be generated somewhere else, with much more data and used for multiple purposes.

Reply on news.ycombinator.com