4 ms·

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 (ba

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>

kevmo314 2y ago
A simple solution is to create a component that does what you want which retains the benefit of being explicit.
- deleted 2y ago
  [deleted]
- n2d4 2y ago
  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?
  - mikojan 2y ago
    > What if you want to render your navbar differently depending on the context? Uhm maybe ...use ...context?
    - n2d4 2y ago
      So you'd rather write twice the code and use React contexts for this simple feature just to avoid iterating through an array?
      - mikojan 2y ago
        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.

kevmo314 2y ago

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

deleted 2y ago
[deleted]
n2d4 2y ago
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?
- mikojan 2y ago
  > What if you want to render your navbar differently depending on the context? Uhm maybe ...use ...context?
  - n2d4 2y ago
    So you'd rather write twice the code and use React contexts for this simple feature just to avoid iterating through an array?
    - mikojan 2y ago
      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.