[docs] Better support IE11

docs/src/components/ApiMenu.js

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import find from 'lodash/find';
 import ApiMenuComponents from 'docs/src/components/ApiMenuComponents';
 import { demoComponentsTree } from 'docs/src/components/files';
 
@@ -12,7 +13,7 @@ function ApiMenu(props) {
     return null;
   }
 
-  const item = demoComponentsTree.find((item2) => item2.demo.name === currentRoute.demo.name);
+  const item = find(demoComponentsTree, (item2) => item2.demo.name === currentRoute.demo.name);
 
   if (!item) {
     return null;

docs/src/components/DemoButton.js

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import find from 'lodash/find';
 import { Link } from 'react-router';
 import IconButton from 'material-ui/IconButton';
 import PlayCircleOutlineIcon from 'material-ui-icons/PlayCircleOutline';
@@ -15,8 +16,8 @@ function DemoButton(props) {
     return null;
   }
 
-  const item = demoComponentsTree.find((item2) => {
-    return item2.components.find((component) => component === currentRoute.componentAPI.name);
+  const item = find(demoComponentsTree, (item2) => {
+    return find(item2.components, (component) => component === currentRoute.componentAPI.name);
   });
 
   if (!item) {

docs/src/pages/component-demos/chips/ChipsArray.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -17,13 +17,15 @@ const styleSheet = createStyleSheet('ChipsArray', (theme) => ({
 }));
 
 class ChipsArray extends Component {
-  state = { chipData: [
-    { key: 0, label: 'Angular' },
-    { key: 1, label: 'JQuery' },
-    { key: 2, label: 'Polymer' },
-    { key: 3, label: 'ReactJS' },
-    { key: 4, label: 'Vue.js' },
-  ] };
+  state = {
+    chipData: [
+      { key: 0, label: 'Angular' },
+      { key: 1, label: 'JQuery' },
+      { key: 2, label: 'Polymer' },
+      { key: 3, label: 'ReactJS' },
+      { key: 4, label: 'Vue.js' },
+    ],
+  };
 
   styles = {
     chip: {
@@ -35,35 +37,33 @@ class ChipsArray extends Component {
     },
   };
 
-  handleRequestDelete = (key) => () => {
-    if (key === 3) {
+  handleRequestDelete = (data) => () => {
+    if (data.label === 'ReactJS') {
       alert('Why would you want to delete React?! :)'); // eslint-disable-line no-alert
       return;
     }
 
     const chipData = [...this.state.chipData];
-    const chipToDelete = chipData.indexOf(chipData.find((chip) => chip.key === key));
+    const chipToDelete = chipData.indexOf(data);
     chipData.splice(chipToDelete, 1);
     this.setState({ chipData });
   };
 
   render() {
     const classes = this.props.classes;
 
-    const renderChip = (data) => {
-      return (
-        <Chip
-          label={data.label}
-          key={data.key}
-          onRequestDelete={this.handleRequestDelete(data.key)}
-          className={classes.chip}
-        />
-      );
-    };
-
     return (
       <div className={classes.row}>
-        {this.state.chipData.map(renderChip, this)}
+        {this.state.chipData.map((data) => {
+          return (
+            <Chip
+              label={data.label}
+              key={data.key}
+              onRequestDelete={this.handleRequestDelete(data)}
+              className={classes.chip}
+            />
+          );
+        })}
       </div>
     );
   }