diff --git a/docs/rules/no-this-in-sfc.md b/docs/rules/no-this-in-sfc.md
index 45760fe74b..e622408626 100644
--- a/docs/rules/no-this-in-sfc.md
+++ b/docs/rules/no-this-in-sfc.md
@@ -17,6 +17,15 @@ function Foo(props) {
}
```
+```jsx
+function Foo(props) {
+ const { bar } = this.props;
+ return (
+
{bar}
+ );
+}
+```
+
```jsx
function Foo(props, context) {
return (
@@ -27,6 +36,18 @@ function Foo(props, context) {
}
```
+```jsx
+function Foo(props, context) {
+ const { foo } = this.context;
+ const { bar } = this.props;
+ return (
+
+ {foo ? bar : ''}
+
+ );
+}
+```
+
```jsx
function Foo(props) {
if (this.state.loading) {
@@ -40,6 +61,21 @@ function Foo(props) {
}
```
+```jsx
+function Foo(props) {
+ const { loading } = this.state;
+ const { bar } = this.props;
+ if (loading) {
+ return ;
+ }
+ return (
+
+ {bar}
+
+ );
+}
+```
+
The following patterns are **not** considered warnings:
```jsx
@@ -50,6 +86,23 @@ function Foo(props) {
}
```
+```jsx
+function Foo(props) {
+ const { bar } = props;
+ return (
+ {bar}
+ );
+}
+```
+
+```jsx
+function Foo({ bar }) {
+ return (
+ {bar}
+ );
+}
+```
+
```jsx
function Foo(props, context) {
return (
@@ -59,3 +112,25 @@ function Foo(props, context) {
);
}
```
+
+```jsx
+function Foo(props, context) {
+ const { foo } = context;
+ const { bar } = props;
+ return (
+
+ {foo ? bar : ''}
+
+ );
+}
+```
+
+```jsx
+function Foo({ bar }, { foo }) {
+ return (
+
+ {foo ? bar : ''}
+
+ );
+}
+```