title: Failed prop type: The prop `children` is marked as required in `e`, but its value is `null`
body: <p>In my React app, I'm getting the following error but it doesn't tell me where it's happening. Any idea how I can pinpoint its location? The only place I have <code>this.props.children</code> doesn't seem to make any sense for this error.</p>
  
  <p><a href="https://i.stack.imgur.com/49DVc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/49DVc.png" alt="enter image description here"></a></p>
  
  <p>UPDATE: 
  Here's the <code>Timeline</code> component.</p>
  
  <pre><code>import React, { PropTypes } from 'react';
  import PerfectScrollBar from 'react-perfect-scrollbar';
  
  // Components
  import TimelineEntry from './timelineEntry';
  
  // Defaults
  import { AvatarUrl } from '../../../../enum/defaults';
  
  const Timeline = ({ member, conversationId, messages, activeMessageId, handleClickMessageSelected }) =&gt; {
  
      return (
          &lt;div className=" height-100 padding-top-70"&gt;
  
              &lt;div className="padding-15" style={{ position: 'absolute', top: '0', left: '0' }}&gt;
  
                  {typeof conversationId !== "undefined" &amp;&amp; conversationId !== ""
                      ? &lt;div className="timeline-item-msg" id="msc-newConversationMessage"&gt;
  
                          &lt;img src={member.avatar ? member.avatar.smallAvatarUrl : AvatarUrl.avatar} className="tim-image" /&gt;
                          &lt;div className="tim-msg"&gt;
                              &lt;div className="tim-msg-body cursor-pointer border-radius"&gt;
                                  New Message
                              &lt;/div&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      : null
                  }
              &lt;/div&gt;
  
              &lt;div className="height-100 position-relative padding-15"&gt;
  
                  &lt;PerfectScrollBar&gt;
                      {
                          messages.length &gt; 0
                              ? messages.map(item =&gt; &lt;TimelineEntry key={item.id} entry={item} activeMessageId={activeMessageId} handleClickMessageSelected={handleClickMessageSelected} /&gt;)
                              : null
                      }
                  &lt;/PerfectScrollBar&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  Timeline.PropTypes = {
  
      member: PropTypes.object.isRequired,
      conversationId: PropTypes.string.isRequired,
      messages: PropTypes.array.isRequired,
      activeMessageId: PropTypes.string.isRequired,
      handleClickMessageSelected: PropTypes.func.isRequired
  };
  
  export default Timeline;
  </code></pre>
  
  <p>And this is the <code>TimelineEntry</code> component:</p>
  
  <pre><code>import React, { PropTypes } from 'react';
  
  // Defaults
  import { AvatarUrl } from '../../../../enum/defaults';
  
  // Utils
  import { shortenTextToMaxCharacters } from '../../../../utils/string/stringUtils';
  
  const TimelineEntry = ({ entry, activeMessageId, handleClickMessageSelected }) =&gt; {
  
      let wrapperClass = 'timeline-item-msg';
      if (entry.userFlag != 0)
          wrapperClass += ' flag-' + entry.userFlag;
  
      if (entry.id === activeMessageId)
          wrapperClass += ' active';
  
      return (
          &lt;div className={wrapperClass} id={'mst-' + entry.id} onClick={e =&gt; handleClickMessageSelected(entry.id)}&gt;
  
              &lt;img src={entry.sender.avatarUrl ? entry.sender.avatarUrl : AvatarUrl.avatar} className="tim-image" /&gt;
  
              &lt;div className="tim-msg"&gt;
  
                  &lt;div className="tim-msg-header"&gt;
  
                      {entry.sender.fullName} &lt;br /&gt;&lt;span className="opacity-6"&gt;{entry.messageTimeStamp.weekDay}  {entry.messageTimeStamp.date} &lt;i className="margin-right-40"&gt;{entry.messageTimeStamp.time}&lt;/i&gt;&lt;/span&gt;
  
                  &lt;/div&gt;
  
                  &lt;div className="tim-msg-body cursor-pointer"&gt;
  
                      {shortenTextToMaxCharacters(entry.body.trim(), 75)}
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
      );
  }
  
  TimelineEntry.PropTypes = {
  
      entry: PropTypes.object.isRequired,
      activeMessageId: PropTypes.string.isRequired,
      handleClickMessageSelected: PropTypes.func.isRequired
  };
  
  export default TimelineEntry;
  </code></pre>