Allow arrow functions in JSX props

Author: Gil Birman

packages/eslint-config-airbnb/rules/react.js

@@ -41,8 +41,8 @@ module.exports = {
     // Prevent usage of .bind() and arrow functions in JSX props
     // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md
     'react/jsx-no-bind': [2, {
-      'ignoreRefs': false,
-      'allowArrowFunctions': false,
+      'ignoreRefs': true,
+      'allowArrowFunctions': true,
       'allowBind': false,
     }],
     // Prevent duplicate props in JSX

react/README.md

@@ -274,6 +274,23 @@
 
 ## Methods
 
+  - Use arrow functions to close over local variables.
+
+    ```javascript
+    function ItemList(props) {
+      return (
+        <ul>
+          {props.items.map((item, index) => (
+            <Item
+              key={item.key}
+              onClick={() => doSomethingWith(item.name, index)}
+            />
+          ))}
+        </ul>
+      );
+    }
+    ```
+
   - Bind event handlers for the render method in the constructor. eslint: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)
 
   > Why? A bind call in the render path creates a brand new function on every single render.