title: iterate through undefined/null objects in a react element
body: <p>I have a super simple react element like this below:</p>
  
  <pre><code>const Stores = ({ stores }) =&gt; {
    const renderStores = () =&gt; Object.keys(stores).map(store =&gt; {    
      return (
        &lt;div key={store}&gt;
          { store }        
        &lt;/div&gt;
      )
    })
  
    return (
      &lt;div&gt;
        { renderStores() }
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>It takes in <code>stores</code> (it's a POJO, not an array) as a prop and iterates through its keys to display the name of the store.</p>
  
  <p>The problem is when I write react elements this way, the <code>stores</code> isn't defined or could be null at this point in my app and this causes <code>Object.keys</code> 
  to throw an error because you can't iterate through undefined or null.</p>
  
  <p>What I want is the behavior of this react component to <strong>render nothing</strong> if <code>stores</code> is undefined or null.</p>
  
  <p>I would like to avoid the need to wrap my <code>renderStores</code> function and check for undefined/null:</p>
  
  <pre><code>const Stores = ({ stores }) =&gt; {
    const renderStores = () =&gt; {
      if (stores) {
        return Object.keys(stores).map(store =&gt; {    
          return (
            &lt;div key={store}&gt;
              { store }        
            &lt;/div&gt;
          )
        })  
      } else {
        return &lt;div&gt;&lt;/div&gt;
      }    
    }
  
    return (
      &lt;div&gt;
        { renderStores() }
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>But this isn't easy on the eyes.</p>
  
  <p>I could instead do this:</p>
  
  <pre><code>return (
    &lt;div&gt;
      { stores ? renderStores() : '' }
    &lt;/div&gt;
  )
  </code></pre>
  
  <p>But this seems like boilerplate.</p>
  
  <p>Is there a better way or a common convention to protect <code>Object.keys()</code> from throwing an error when undefined/null is passed in to be iterated in a react element?</p>