title: Cannot read property 'length' of null in React component
body: <p>I am trying to build a React list component using a json-like format and materialUI components. I am trying to use a recursive function to build the component but it gives an error:</p>
  
  <pre><code>transformed.js:23561 Uncaught TypeError: Cannot read property 'length' of null
  at getStyles (transformed.js:23561)
  at ListItem.render (transformed.js:23890)
  at transformed.js:31579
  at measureLifeCyclePerf (transformed.js:30859)
  at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (transformed.js:31578)
  at ReactCompositeComponentWrapper._renderValidatedComponent (transformed.js:31605)
  at ReactCompositeComponentWrapper.performInitialMount (transformed.js:31145)
  at ReactCompositeComponentWrapper.mountComponent (transformed.js:31041)
  at Object.mountComponent (transformed.js:3565)
  at ReactDOMComponent.mountChildren (transformed.js:35534)
  </code></pre>
  
  <p>Here is the function I am trying to use:</p>
  
  <pre><code>listCreator = (listItems) =&gt; {
   let listOutput = null
   listOutput = listItems.map((listSubItem, index) =&gt;
     &lt;ListItem
       key = {index}
       primaryText = {listSubItem.primaryText ? listSubItem.primaryText : null}
       primaryTogglesNestedList = {listSubItem.primaryTogglesNestedList ? listSubItem.primaryTogglesNestedList : null}
       className = {listSubItem.className ? listSubItem.classname : null}
       nestedItems = {listSubItem.nestedItem ? this.listCreator(listSubItem.nestedItems) : null}
     /&gt;
   )
   console.log(listOutput)
   return(listOutput)
  }
  </code></pre>
  
  <p>Here is the component's state:</p>
  
  <pre><code>this.state = {
    categoriesListItems:[
      {
        primaryText:"Item0",
        primaryTogglesNestedList:true,
        nestedItems:
        [{
          primaryText:"Item0Content",
          content: "Testing0...",
        }]
      },
      {
        primaryText:"Item1",
        primaryTogglesNestedList:true,
        nestedItems:
        [{
          primaryText:"Item1Content",
          content: "Testing1...",
        }]
      },
      {
        primaryText:"Item2",
        primaryTogglesNestedList:true,
        nestedItems:
        [{
          primaryText:"Item2Content",
          type: ListItem
        }]
      }
    ]
  };
  </code></pre>
  
  <p>Here is the render function:</p>
  
  <pre><code>render(){
   return(
     &lt;List&gt;
       {this.listCreator(this.state.categoriesListItems)}
     &lt;/List&gt;
  )}
  </code></pre>
  
  <p>Here are the three objects returned in my log in my map function:</p>
  
  <pre><code>{primaryText: "Item0", primaryTogglesNestedList: true, nestedItems:Array(1)}
   nestedItems: Array(1)
    0: {primaryText: "Item0Content", content: "Testing0..."}
    length: 1
    __proto__ : Array(0)
   primaryText: "Item0"
   primaryTogglesNestedList: true
   __proto__: Object
  
  {primaryText: "Item1", primaryTogglesNestedList: true, nestedItems:Array(1)}
   nestedItems: Array(1)
    0: {primaryText: "Item1Content", content: "Testing1..."}
    length: 1
    __proto__ : Array(0)
   primaryText: "Item1"
   primaryTogglesNestedList: true
   __proto__: Object
  
  {primaryText: "Item2", primaryTogglesNestedList: true, nestedItems:Array(1)}
   nestedItems: Array(1)
    0: {primaryText: "Item2Content", content: type: ƒ}
    length: 1
    __proto__ : Array(0)
   primaryText: "Item2"
   primaryTogglesNestedList: true
   __proto__: Object
  </code></pre>