Why is children prop undefined, despite setting it in defaultProps? - reactjs

Question

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 recommended by the React docs, I get this error thrown:
prop type children is invalid; it must be a function, usually from the prop-types package, but received undefined.
When I step through in the Chrome debugger, I see that children is undefined when the validation is performed. But I specifically set children in defaultProps, so why is it undefined? I've tried several different values for defaultProps.children, including [] and ''. All of them produced the same error.
Note that my app works OK. It's only PropTypes validation that is failing.
Below is a simplified version of the problematic code. Note that I'm using static properties to define defaultProps (as recommended by Dan Abramaov). I'm using create-react-app so I have the Babel transform to enable the default class properties syntax.
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 (
<Fragment>
{this.props.children}
</Fragment>
)
}
}
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) => {
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab
});
}
}
render() {
return (
<Fragment>
<Nav tabs>
{this.props.children.map((tab,i) =>
<NavItem key={i} style={{cursor: 'pointer'}}>
<NavLink
className={classnames({ active: this.state.activeTab === i })}
onClick={() => { this.toggle(i); }}
>
{ tab.props.name }
</NavLink>
</NavItem>
)}
</Nav>
<TabContent activeTab={this.state.activeTab}>
{this.props.children.map((tab,i) =>
<TabPane key={i} tabId={i}>
{tab}
</TabPane>
)}
</TabContent>
</Fragment>
);
}
}
If it matters, here's a simplified example of how these components are used:
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 (
<div>
<TabSet>
<Tab name="Home">
<HomeTab />
</Tab>
<Tab name="Hang Times">
<HangTimesTab />
</Tab>
<Tab name="Friends">
<FriendsTab />
</Tab>
</TabSet>
</div>
);
}
}

Answer 1

The error message is a little confusing, but it refers to the prop-type declaration for children (i.e. PropTypes.node.required), which is undefined because of a typo. It should be PropTypes.node.isRequired.