iterate through undefined/null objects in a react element
<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>