This quick post is going to fall into my Tips & Tricks category as it’s information readily available but if you didn’t know to look for it you probably wouldn’t have found it. In version 16.2 React JS introduced the notion of “Fragments”. A Fragment is basically an empty container that you can use in a react component to group a set of children together without adding additional nodes into the DOM. Prior to version 16.2 (and 16.0 – we’ll get to why in a moment), every component must return one and only one parent node. This makes a certain amount of sense, but there are situations where you want a component to return a set of siblings. So, to support this scenario you would artificially add a <div> element to your component to adhere to that requirement.
[Continue Reading]
Tip: React JS - Fragments streamline your DOM
Tip: Implementing 'Nav' Office Fabric UI React Component
This post is meant to be a quick supplement to the documentation provided by Microsoft around the Nav component of the Fluent UI. This Nav component gives you a control that you either create URL links or maybe more commonly, support navigation via code. For general links, where the URL is either a route or some other page, the implementation of the INavLinkGroup[] and INavLink is quite straight forward, just provide a Key, Name, and URL with a couple other optional parameters. For programmatic support, the documentation provides a solution but as it turns out that implementation is misleading. I was finding that my nav items that needed to execute a bit of code would sometimes execute that code twice. As it turns out I wasn’t using it right, so let me help clarify by showing you what I found.
[Continue Reading]