Repository: jsx-eslint/eslint-plugin-react (JavaScript)

Issue:
`props => props.borderRadius` should not trigger `react/destructuring-assignment` 
`props => <div id={props.id} />` should be considered to a stateless component, `props => props.borderRadius` should not

For example:

```js
import styled from 'react-emotion'

const ButtonWrapperDiv = styled.div`
  & .s-common-button {
    border-radius: ${props => props.borderRadius}px;
    background: ${props => props.backgroundColor};
    color: ${props => props.textColor};
    &:hover {
      background: ${props => props.hoverBackgroundColor};
    }
  }
```

BTW, it's better to provide an option to allow one line stateless component to use `props` directly.

For example:

```js
const ComonentA = props => <div id={props.id} />
```
  
or 

```js
function ComonentA(props) { return <div id={props.id} /> }
```

Otherwise it will be too complicated:

```js
const ComonentA = props => { const { id } = props; return <div id={id} /> }
```
destructuring-assignment is too greedy. Should only apply within components.
I enabled this rule and immediately ran into issues within files that aren't React related, nor do they look like a component. For example:

I had to rename these to `properties` instead of `props`: https://github.com/milesj/shapeshifter/commit/52e33fed6c5386f80ffffa3a270e6d6fd9997b05#diff-392ca8d88bc7e496ea34c73c8cc8258c

Had to disable this line because it thought `context` was React related: https://github.com/milesj/boost/blob/master/tests/Routine.test.js#L825

And all of these errors when pulled into another project. None of which is React.
```
/Users/Miles/Sites/beemo/packages/core/src/Beemo.ts
  188:23  error  Must use destructuring context assignment  react/destructuring-assignment
  221:73  error  Must use destructuring context assignment  react/destructuring-assignment
  244:41  error  Must use destructuring context assignment  react/destructuring-assignment

/Users/Miles/Sites/beemo/packages/core/src/CleanupRoutine.ts
  25:7  error  Must use destructuring context assignment  react/destructuring-assignment

/Users/Miles/Sites/beemo/packages/core/src/configure/CreateConfigRoutine.ts
   49:34  error  Must use destructuring context assignment  react/destructuring-assignment
   55:5   error  Must use destructuring context assignment  react/destructuring-assignment
  124:21  error  Must use destructuring context assignment  react/destructuring-assignment
  124:46  error  Must use destructuring context assignment  react/destructuring-assignment

/Users/Miles/Sites/beemo/packages/core/src/driver/RunCommandRoutine.ts
   43:26  error  Must use destructuring context assignment  react/destructuring-assignment
   73:5   error  Must use destructuring context assignment  react/destructuring-assignment
  214:24  error  Must use destructuring context assignment  react/destructuring-assignment
  215:25  error  Must use destructuring context assignment  react/destructuring-assignment
  241:11  error  Must use destructuring context assignment  react/destructuring-assignment
  268:20  error  Must use destructuring context assignment  react/destructuring-assignment
  269:47  error  Must use destructuring context assignment  react/destructuring-assignment

/Users/Miles/Sites/beemo/packages/core/src/ExecuteScriptRoutine.ts
  25:32  error  Must use destructuring context assignment  react/destructuring-assignment

/Users/Miles/Sites/beemo/packages/core/src/SyncDotfilesRoutine.ts
  36:32  error  Must use destructuring context assignment  react/destructuring-assignment
```

I see that you're checking for a component, but perhaps TS is conflicting.


Discussion:
Use destructuring:
```js
function ComponentA({ id }) { return <div id={id} /> }
```
Separately, what considers `props => props.borderRadius` an SFC? Can you elaborate?
<img width="841" alt="screenshot" src="https://user-images.githubusercontent.com/43011/34762630-64b7e8c0-f623-11e7-88d5-26f188265b02.png">

aha, thank you :-)

This is definitely a bug, as that rule should be using our component detection, and [is not](https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/destructuring-assignment.js).
Looks like [it is now](https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/destructuring-assignment.js#L28) but [it's not consulting the confidence level](https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/destructuring-assignment.js#L102). These little components are being detected, but their confidence is 0.
I found that there is only one rule that makes use of the confidence value 🙁 
Although this test would require checking for confidence of 1 to pass
https://github.com/yannickcr/eslint-plugin-react/blob/05d781b7156fae381578eef5a8c67502e336b3ae/tests/lib/rules/destructuring-assignment.js#L231-L239
If we change the detection helper itself to not fire for a confidence level of zero, do any tests fail?
I'm seeing that `Components.list()` only returns those with confidence of 2, whereas `Components.get(node)` returns a component without consideration for the confidence.
Not sure if we need to change that. But I did go ahead and made `Components.get` only return the component if its confidence is at least 1, and no tests failed.
That seems like it would be an improvement.

It’s possible that our component detection breaks with the TypeScript parser. Do the errors still occur if the files are converted to regular JS?
I also see that this only seems to complain about context; so maybe there’s a specific bug around that facet of the rule. 
I'll try and double check JS only files, will be a bit tough.
Every single file in my project is now errors - no react imported or used anywhere close.  Seems you guys just look for any variable calls "props" or "context" and expect you're in a react component...

```javascript
export default (context: $Context) => ({
  extensions: ['.js', '.jsx', '.json'],
  modules: [
    /**
     * Resolve imports throughout the application in this order.
     * This allows us to import various parts of the application
     * easier for better organization.
     *
     * Modules always resolve top-down.
     */
    context.dirs.view(),
    path.join(context.dirs.src(), 'libraries'),
    'shared',
    'node_modules',
  ],
});

```

![image](https://user-images.githubusercontent.com/15365418/41760485-839f90e4-75a8-11e8-923d-414210f4441f.png)

`react/destructuring-assignment`
@bradennapier that's a separate issue (and definitely a bug) - can you file that as a separate issue?
Maybe this temporary solution works. add following line in "rules" of .eslintrc.js

`"react/destructuring-assignment": [true, { "extensions": [".jsx"] }],`

but It may also occur again with some other eslint-plugin-react rules later, in .js file.
I want to restrict all eslint-plugin-react warning only in .jsx file. but I don't know how to.



Patch:
diff --git a/lib/util/Components.js b/lib/util/Components.js
index 90ec38550f..a9a4161bb6 100644
--- a/lib/util/Components.js
+++ b/lib/util/Components.js
@@ -75,11 +75,14 @@ class Components {
    * Find a component in the list using its node
    *
    * @param {ASTNode} node The AST node being searched.
-   * @returns {Object} Component object, undefined if the component is not found
+   * @returns {Object} Component object, undefined if the component is not found or has confidence value of 0.
    */
   get(node) {
     const id = getId(node);
-    return this._list[id];
+    if (this._list[id] && this._list[id].confidence >= 1) {
+      return this._list[id];
+    }
+    return null;
   }
 
   /**


Test patch:
diff --git a/tests/lib/rules/destructuring-assignment.js b/tests/lib/rules/destructuring-assignment.js
index ca5a85e28a..b1200c2d06 100644
--- a/tests/lib/rules/destructuring-assignment.js
+++ b/tests/lib/rules/destructuring-assignment.js
@@ -134,6 +134,37 @@ ruleTester.run('destructuring-assignment', rule, {
       }
     };`,
     options: ['always']
+  }, {
+    code: [
+      'const div = styled.div`',
+      '  & .button {',
+      '    border-radius: ${props => props.borderRadius}px;',
+      '  }',
+      '`'
+    ].join('\n')
+  }, {
+    code: `
+      export default (context: $Context) => ({
+        foo: context.bar
+      });
+    `,
+    parser: 'babel-eslint'
+  }, {
+    code: `
+      class Foo {
+        bar(context) {
+          return context.baz;
+        }
+      }
+    `
+  }, {
+    code: `
+      class Foo {
+        bar(props) {
+          return props.baz;
+        }
+      }
+    `
   }],
 
   invalid: [{