title: ReactJs requires a wrapper div which breaks the layout
body: <p>I have the following React code:</p>
  
  <pre><code>render() {
      return (
        &lt;NavItem dropdown toggleOnHover className='collapse-left'&gt;
  
          &lt;DropdownButton nav&gt;
            &lt;Icon bundle='fontello' glyph='bullhorn' /&gt;
            {this.getBadge()}
          &lt;/DropdownButton&gt;
          &lt;Menu alignRight ref='bullhorn-menu' id='notifications-menu' className='double-width' alwaysInactive&gt;
            &lt;MenuItem header&gt;
              &lt;Entity entity='Notifications' /&gt;
            &lt;/MenuItem&gt;
  
            {this.state.notifications.map((item, index) =&gt; {
              return (
                &lt;Notification notification={item} key={index} /&gt;
              )
            })}
  
            &lt;MenuItem noHover&gt;
              &lt;Grid collapse style={{marginBottom: -10}}&gt;
                &lt;Row&gt;
                  &lt;Col xs={12} collapseLeft collapseRight&gt;
                    &lt;Button block className='notification-footer-btn left-btn'&gt;MARK ALL READ&lt;/Button&gt;
                  &lt;/Col&gt;
                &lt;/Row&gt;
              &lt;/Grid&gt;
            &lt;/MenuItem&gt;
          &lt;/Menu&gt;
        &lt;/NavItem&gt;
      )
    }
  </code></pre>
  
  <p>The code above doesn't work, because it throws: </p>
  
  <pre><code>react-with-addons.js:9729 Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
  </code></pre>
  
  <p>However, when I surround the map() statement with a div, it works, but that breaks the layout. </p>
  
  <p>The <code>Notification</code> component just returns something like this:</p>
  
  <pre><code>&lt;MenuItem href='/'&gt;
          &lt;Grid&gt;
            &lt;Row&gt;
              &lt;Col xs={2} className='avatar-container' collapseRight&gt;
                &lt;div&gt;&lt;img src='/imgs/avatars/avatar22.png' width='40' height='40' alt='sarah_patchett' /&gt;&lt;/div&gt;
                &lt;div className='text-center'&gt;
                  &lt;BLabel bsStyle='info'&gt;NEW&lt;/BLabel&gt;
                &lt;/div&gt;
              &lt;/Col&gt;
              &lt;Col xs={10} className='notification-container' collapseLeft collapseRight&gt;
                &lt;div className='time'&gt;
                  &lt;strong className='fg-darkgray50'&gt;&lt;Icon bundle='fontello' glyph='chat-5'/&gt;&lt;em&gt;&lt;Entity entity='notificationsTimeFirst' /&gt;&lt;/em&gt;&lt;/strong&gt;
                &lt;/div&gt;
                &lt;div className='message-header'&gt;
                  &lt;strong className='fg-darkgreen45'&gt;Sarah Patchett sent you a private message&lt;/strong&gt;
                &lt;/div&gt;
                &lt;div className='message-details fg-text'&gt;
                  &lt;span&gt;{"Hey Anna! Sorry for delayed response. I've just finished reading the mail you sent couple of days ago..."}&lt;/span&gt;
                &lt;/div&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/Grid&gt;
        &lt;/MenuItem&gt;
  </code></pre>
  
  <p>Can someone tell me how to just loop over my array and render the Notification component, without the surrounding div?</p>