Merge pull request react-bootstrap#1145 from taion/fix-deprecated-tabbed-area

Fix mapping TabPane title

Author: jquense

docs/src/ComponentsPage.js

@@ -513,7 +513,7 @@ const ComponentsPage = React.createClass({
 
                 {/* Tabbed Areas */}
                 <div className='bs-docs-section'>
-                  <h1 className='page-header'><Anchor id='tabs'>Togglable tabs</Anchor> <small>TabbedArea, TabPane</small></h1>
+                  <h1 className='page-header'><Anchor id='tabs'>Togglable tabs</Anchor> <small>Tabs, Tab</small></h1>
 
                   <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
 

src/TabPane.js

@@ -3,9 +3,13 @@ import deprecationWarning from './utils/deprecationWarning';
 import Tab from './Tab';
 
 const TabPane = React.createClass({
-  componentDidMount() {
-    deprecationWarning('TabPane', 'Tab', 'https://github.com/react-bootstrap/react-bootstrap/pull/1091');
+  componentWillMount() {
+    deprecationWarning(
+      'TabPane', 'Tab',
+      'https://github.com/react-bootstrap/react-bootstrap/pull/1091'
+    );
   },
+
   render() {
     return (
       <Tab {...this.props} />

src/TabbedArea.js

@@ -5,20 +5,23 @@ import ValidComponentChildren from './utils/ValidComponentChildren';
 import deprecationWarning from './utils/deprecationWarning';
 
 const TabbedArea = React.createClass({
-  componentDidMount() {
-    deprecationWarning('TabbedArea', 'Tabs', 'https://github.com/react-bootstrap/react-bootstrap/pull/1091');
+  componentWillMount() {
+    deprecationWarning(
+      'TabbedArea', 'Tabs',
+      'https://github.com/react-bootstrap/react-bootstrap/pull/1091'
+    );
   },
+
   render() {
-    let {children, ...props} = this.props;
-    let tabTitles = [];
+    const {children, ...props} = this.props;
 
-    tabTitles = ValidComponentChildren.map(function(child) {
-      let {tab, ...others} = child.props;
-      tabTitles.push(<TabPane title={tab} {...others}/>);
+    const tabs = ValidComponentChildren.map(children, function (child) {
+      const {tab: title, ...others} = child.props;
+      return <TabPane title={title} {...others} />;
     });
 
     return (
-      <Tabs {...props} >{tabTitles}</Tabs>
+      <Tabs {...props}>{tabs}</Tabs>
     );
   }
 });