From 4fd80db2d059b361bd815e016a06d498b9755b0b Mon Sep 17 00:00:00 2001 From: "Philip (flip) Kromer" Date: Sat, 4 Apr 2020 15:10:11 -0500 Subject: [PATCH] (cosmetic) Quote `this` as ``this`` in no-this-in-sfc This error's "this" references some `this` in this line, not this line or another that. Quoting this in `no-this-in-sfc` not thus but as `this` might clear this up. --- docs/rules/no-this-in-sfc.md | 5 +---- lib/rules/no-this-in-sfc.js | 2 +- tests/lib/rules/no-this-in-sfc.js | 2 +- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/docs/rules/no-this-in-sfc.md b/docs/rules/no-this-in-sfc.md index e622408626..2f8c12a0da 100644 --- a/docs/rules/no-this-in-sfc.md +++ b/docs/rules/no-this-in-sfc.md @@ -1,9 +1,6 @@ # Prevent `this` from being used in stateless functional components (react/no-this-in-sfc) -When using a stateless functional component (SFC), props/context aren't accessed in the same way as a class component or the `create-react-class` format. Both props and context are passed as separate arguments to the component instead. Also, as the name suggests, a stateless component does not have state on `this.state`. - -Attempting to access properties on `this` can be a potential error if someone is unaware of the differences when writing a SFC or missed when converting a class component to a SFC. - +In React, there are two styles of component. One is a class component: `class Foo extends Component {...}`, which accesses its props, context and state as properties of `this`: `this.props.foo`, etc. The other are stateless functional components (SFCs): `function Foo(props, context) {...}`. As you can see, there's no `state` (hence the name), and the props and context are provided as its two functional arguments. In an SFC, state is usually best implements with a [React hook](https://reactjs.org/docs/hooks-overview.html) such as `React.useState()`. Attempting to access properties on `this` can sometimes be valid, but it's very commonly an error caused by unfamiliarity with the differences between the two styles of components, or a missed reference when converting a class component to an SFC. ## Rule Details diff --git a/lib/rules/no-this-in-sfc.js b/lib/rules/no-this-in-sfc.js index df86ba55ca..54c1488414 100644 --- a/lib/rules/no-this-in-sfc.js +++ b/lib/rules/no-this-in-sfc.js @@ -11,7 +11,7 @@ const docsUrl = require('../util/docsUrl'); // Constants // ------------------------------------------------------------------------------ -const ERROR_MESSAGE = 'Stateless functional components should not use this'; +const ERROR_MESSAGE = 'Stateless functional components should not use `this`'; // ------------------------------------------------------------------------------ // Rule Definition diff --git a/tests/lib/rules/no-this-in-sfc.js b/tests/lib/rules/no-this-in-sfc.js index 8406093393..f672d40109 100644 --- a/tests/lib/rules/no-this-in-sfc.js +++ b/tests/lib/rules/no-this-in-sfc.js @@ -8,7 +8,7 @@ // Constants // ------------------------------------------------------------------------------ -const ERROR_MESSAGE = 'Stateless functional components should not use this'; +const ERROR_MESSAGE = 'Stateless functional components should not use `this`'; // ------------------------------------------------------------------------------ // Requirements