4 ms·
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
by namanyayg 2y ago
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.
- thomasfromcdnjs 2y agoAn 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 agoA 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 agoWhich 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 agoSo you'd rather write twice the code and use React contexts for this simple feature just to avoid iterating through an array?
- mikojan 2y agoWhy 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.
- lowercased 2y agoThought the same thing. That array list might be generated somewhere else, with much more data and used for multiple purposes.
- JansjoFromIkea 2y agoNot 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.
- tracker1 2y agoNot 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).