title: Why is children prop undefined, despite setting it in defaultProps?
body: <p>I'd like to set PropTypes validation for my React component to warn if there are no children. But when I follow the PropTypes syntax <a href="https://reactjs.org/docs/typechecking-with-proptypes.html#requiring-single-child" rel="nofollow noreferrer">recommended by the React docs</a>, I get this error thrown: </p>
  
  <blockquote>
    <p>prop type <code>children</code> is invalid; it must be a function, usually from the <code>prop-types</code> package, but received <code>undefined</code>.</p>
  </blockquote>
  
  <p>When I step through in the Chrome debugger, I see that <code>children</code> is <code>undefined</code> when the validation is performed. But I specifically set <code>children</code> in <code>defaultProps</code>, so why is it <code>undefined</code>?  I've tried several different values for <code>defaultProps.children</code>, including <code>[]</code> and <code>''</code>. All of them produced the same error. </p>
  
  <p>Note that my app works OK. It's only <code>PropTypes</code> validation that is failing.</p>
  
  <p>Below is a simplified version of the problematic code. Note that I'm using static properties to define <code>defaultProps</code> (as <a href="https://github.com/facebook/react/issues/3725#issuecomment-355965170" rel="nofollow noreferrer">recommended by Dan Abramaov</a>). I'm using <code>create-react-app</code> so I have the Babel transform to enable the default class properties syntax.</p>
  
  <pre><code>import React, { Fragment } from 'react';
  import PropTypes from 'prop-types'
  import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
  import classnames from 'classnames';
  
  export class Tab extends React.Component {
  
    static propTypes = {
      name: PropTypes.string.isRequired,
      children: PropTypes.node.required,
    }
  
    static defaultProps = {
      name: null,
      children: ''
    }
  
    render () { 
      return (
        &lt;Fragment&gt;
          {this.props.children}
        &lt;/Fragment&gt;
      )
    }
  }
  
  export default class TabSet extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        activeTab: 0
      };
    }
  
    // TODO: limit to only Tab child elements. 
    static propTypes = {
      children: PropTypes.node.required,
    }
  
    static defaultProps = {
      children: ''
    }
  
    toggle = (tab) =&gt; {
      if (this.state.activeTab !== tab) {
        this.setState({
          activeTab: tab
        });
      }
    }
  
    render() { 
      return (
        &lt;Fragment&gt;
          &lt;Nav tabs&gt;
            {this.props.children.map((tab,i) =&gt; 
              &lt;NavItem key={i} style={{cursor: 'pointer'}}&gt;
                &lt;NavLink
                  className={classnames({ active: this.state.activeTab === i })}
                  onClick={() =&gt; { this.toggle(i); }}
                &gt;
                  { tab.props.name }
                &lt;/NavLink&gt;
              &lt;/NavItem&gt;
            )}
          &lt;/Nav&gt;
          &lt;TabContent activeTab={this.state.activeTab}&gt;
            {this.props.children.map((tab,i) =&gt; 
              &lt;TabPane key={i} tabId={i}&gt;
                {tab}
              &lt;/TabPane&gt;
            )}
          &lt;/TabContent&gt;
        &lt;/Fragment&gt;
      );
    }
  }
  </code></pre>
  
  <p>If it matters, here's a simplified example of how these components are used: </p>
  
  <pre><code>import React from 'react';
  import TabSet, {Tab} from './TabSet';
  import HomeTab from './HomeTab';
  import FriendsTab from './FriendsTab';
  import HangTimesTab from './HangTimesTab';
  
  export default class MainContainer extends React.Component {
  
    render() {
      return (
        &lt;div&gt;
          &lt;TabSet&gt;
            &lt;Tab name="Home"&gt;
              &lt;HomeTab /&gt; 
            &lt;/Tab&gt;
            &lt;Tab name="Hang Times"&gt;
              &lt;HangTimesTab /&gt;
            &lt;/Tab&gt;
            &lt;Tab name="Friends"&gt;
              &lt;FriendsTab /&gt;
            &lt;/Tab&gt;
          &lt;/TabSet&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>