React JS – Infinite Sub Menu

I’m going to mention right off the bat this tutorial doesn’t end with you having a ready to use menu. BUT.. it shows you a simple concept you can use to create the elements necessary for the old school infinite sub menus.

Infinite Sub Menus Were All the Rage

It’s been quite some time since I’ve seen infinite menus used. Maybe it’s because people are becoming more mobile conscious in their design decisions. The only way I could see infinite sub menus be mobile friendly is if the sub menu completely replaced the previous one.

It’ll probably seem ridiculously obvious once you see the solution but it may come in handy in the future. Here are two React components; List and ListItem, that can be used to accomplish infinite sub menus.

The Components

 

 

Notice the second import statement. My components are in a directory structure as follows:
-components
–List
—index.js
—List.js
–ListItem
—index.js
—ListItem.js

Because I’m a sucker for modular organization even with simple examples.

Now for the ListItem component:

 

 

Basically the solution comes down to the line
{ items && <List items={items} />}.

We’ve created sort of a circular dependency where a List, has ListItems, which can potentially contain another list. If you’re not sure what’s happening, React is looking at the items variable, if it does not equal undefined, it will continue to the other half of the AND (&&) comparison displaying a new list.

This is also true for vanilla JavaScript. If the first half of an AND comparison fails it will not bother with the rest.

Finally, I’ll give you a quick example object passed to the List component.

That’s all there is to it. Let me know if you have any issues with the following code.

React License Flip-Flop

Has anyone else been following the React license flip-flop? They had me worried for a bit. I’ve dedicated some time and effort to engulf myself in this environment and it was nearly stripped away with a blog post.

Facebook had changed React’s license to a BSD+Patents license.  The Apache Software Foundation did not like the grant in the license because it was “imbalanced towards the licensor”.[1] This sounds a little sneaky, but according to a post released by Facebook it was to protect themselves from “fighting frivolous lawsuits”.[2] This I could understand.

Facebook and a multi-billion dollar company. Which is likely a huge target for patent trolls and others looking to make a “quick”, not really though, buck. The BSD+Patents license was not well accepted like I mentioned before.

The Apache Software Foundation had listed the license under Category-X. Licenses that should not be included with Apache products. This is a pretty big deal, because to me, it sounds like you would not be able to license your software under the Apache License v2.0 for example if it included React source. Usual disclaimer, I’m not a lawyer, yada, yada, yada… lobster bisque.

I’m sure there are those who don’t care about the change. But if you’re developing software for millions of people, it’s something that needs to be taken into consideration. The biggest thing that stood out to me was a post by Matt Mullenweg.[3] He’s one of the founding developers of WordPress. If you can’t tell, you’re on a WordPress site right now! I know it’s the default theme…

In Matt’s post he announced one of their largest open source projects would be rewritten from React due to this license change. That’s crazy, scary, and frustrating all at once.

For those of you who don’t know, Gutenberg will be a new editor developed by WordPress, check it out!

Rewriting an application due to a license change just sucks. The scary part is that this could happen at any point to other libraries. Makes you kind of feel like Tweek from South Park.

But recently Facebook had decided to change their licensing again. And I’m sure glad they did. A post about a week ago from Facebook revealed they would relicense some of their open source projects under the MIT license.[4]

I’m very happy for the change, though in the post Adam did not sound as delighted. I hope they can leave their projects under the MIT license because I believe it will be adopted much faster this way. As for the patent trolls, they need larger penalties for losing, IMO…

[1] –WHICH LICENSES MAY NOT BE INCLUDED WITHIN APACHE PRODUCTS? –  https://www.apache.org/legal/resolved.html#category-x

[2] – Explaining React’s License – https://code.facebook.com/posts/112130496157735/explaining-react-s-license/

[3] – On React and WordPresshttps://ma.tt/2017/09/on-react-and-wordpress/

[4] – Relicensing React, Jest, Flow, and Immutable.jshttps://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/