Nav: Nav component with React-Router using data instead of children

[floydchenchen]

const data = [
   {
     "navKey": 0,
     "title": "Form Components",
     "collapsed": true,
     "subNav": [
       {
         "navKey": 0.1,
         "to": "button",
         "title": "Button",
         "as": NavLink
       },
       {
         "navKey": 0.2,
         "to": "checkbox",
         "title": "Checkbox",
         "as": NavLink
       },
       {
         "navKey": 0.3,
         "to": "dropdown",
         "title": "Dropdown",
         "as": NavLink
       },
       {
         "navKey": 0.4,
         "to": "radio",
         "title": "Radio",
         "as": NavLink
       },
       {
         "navKey": 0.5,
         "to": "switch",
         "title": "Switch",
         "as": NavLink
       },
       {
         "navKey": 0.6,
         "to": "textarea",
         "title": "TextArea",
         "as": NavLink
       },
       {
         "navKey": 0.7,
         "to": "textfield",
         "title": "TextField",
         "as": NavLink
       }
     ]
   }
 ];

to's value should have its initial capitalized.

Also add baseName="#!/" to the router to direct the new page to an expanded page