[Docs] Fix typos

Author: bmish

CHANGELOG.md

@@ -39,7 +39,9 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [Docs] document which rules provide suggestions ([#3359][], [#3365][] @bmish)
 * [Docs] Consistent rule descriptions and doc sections ([#3361][] @bmish)
 * [Docs] Standardize deprecated rule notice ([#3364][] @bmish)
+* [Docs] Fix typos ([#3366][] @bmish)
 
+[#3366]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3366
 [#3365]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3365
 [#3364]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3364
 [#3361]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3361

docs/rules/jsx-pascal-case.md

@@ -79,7 +79,7 @@ Examples of **correct** code for this rule, when `allowLeadingUnderscore` is `tr
 </_AllowedComponent>
 ```
 
-**WARNING:** Adding a leading underscore to the name of a component does **NOT** affect the visibilty or accessibility of that component.  Attempting to use leading underscores to enforce privacy of your components is an error.
+**WARNING:** Adding a leading underscore to the name of a component does **NOT** affect the visibility or accessibility of that component.  Attempting to use leading underscores to enforce privacy of your components is an error.
 
 ## When Not To Use It
 

docs/rules/jsx-props-no-spreading.md

@@ -68,7 +68,7 @@ Examples of **incorrect** code for this rule, when `custom` is set to `ignore`:
 
 ### explicitSpread
 
-`explicitSpread` set to `ignore` will ignore spread operators that are explicilty listing all object properties within that spread. Default is set to `enforce`.
+`explicitSpread` set to `ignore` will ignore spread operators that are explicitly listing all object properties within that spread. Default is set to `enforce`.
 
 Examples of **correct** code for this rule, when `explicitSpread` is set to `ignore`:
 

docs/rules/no-arrow-function-lifecycle.md

@@ -2,7 +2,7 @@
 
 🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
-It is not neccessary to use arrow function for lifecycle methods. This makes things harder to test, conceptually less performant (although in practice, performance will not be affected, since most engines will optimize efficiently), and can break hot reloading patterns.
+It is not necessary to use arrow function for lifecycle methods. This makes things harder to test, conceptually less performant (although in practice, performance will not be affected, since most engines will optimize efficiently), and can break hot reloading patterns.
 
 ## Rule Details
 

docs/rules/no-unstable-nested-components.md

@@ -2,7 +2,7 @@
 
 Creating components inside components without memoization leads to unstable components. The nested component and all its children are recreated during each re-render. Given stateful children of the nested component will lose their state on each re-render.
 
-React reconcilation performs element type comparison with [reference equality](https://github.com/facebook/react/blob/v16.13.1/packages/react-reconciler/src/ReactChildFiber.js#L407). The reference to the same element changes on each re-render when defining components inside the render block. This leads to complete recreation of the current node and all its children. As a result the virtual DOM has to do extra unnecessary work and [possible bugs are introduced](https://codepen.io/ariperkkio/pen/vYLodLB).
+React reconciliation performs element type comparison with [reference equality](https://github.com/facebook/react/blob/v16.13.1/packages/react-reconciler/src/ReactChildFiber.js#L407). The reference to the same element changes on each re-render when defining components inside the render block. This leads to complete recreation of the current node and all its children. As a result the virtual DOM has to do extra unnecessary work and [possible bugs are introduced](https://codepen.io/ariperkkio/pen/vYLodLB).
 
 ## Rule Details
 

docs/rules/sort-prop-types.md

@@ -1,6 +1,6 @@
 # Enforce propTypes declarations alphabetical sorting (react/sort-prop-types)
 
-Some developers prefer to sort prop type declaratioms alphabetically to be able to find necessary declaration easier at the later time. Others feel that it adds complexity and becomes burden to maintain.
+Some developers prefer to sort prop type declarations alphabetically to be able to find necessary declaration easier at the later time. Others feel that it adds complexity and becomes burden to maintain.
 
 ## Rule Details
 

lib/rules/jsx-curly-brace-presence.js

@@ -138,8 +138,8 @@ module.exports = {
       )).join(HTML_ENTITY);
 
       const htmlEntities = text.match(HTML_ENTITY_REGEX());
-      return htmlEntities.reduce((acc, htmlEntitiy) => (
-        acc.replace(HTML_ENTITY, htmlEntitiy)
+      return htmlEntities.reduce((acc, htmlEntity) => (
+        acc.replace(HTML_ENTITY, htmlEntity)
       ), withCurlyBraces);
     }
 
@@ -244,8 +244,8 @@ module.exports = {
     }
 
     // Bail out if there is any character that needs to be escaped in JSX
-    // because escaping decreases readiblity and the original code may be more
-    // readible anyway or intentional for other specific reasons
+    // because escaping decreases readability and the original code may be more
+    // readable anyway or intentional for other specific reasons
     function lintUnnecessaryCurly(JSXExpressionNode) {
       const expression = JSXExpressionNode.expression;
       const expressionType = expression.type;

lib/rules/no-access-state-in-setstate.js

@@ -130,7 +130,7 @@ module.exports = {
               break;
             }
 
-            // Storing all variables containg this.state
+            // Storing all variables containing this.state
             if (current.type === 'VariableDeclarator') {
               vars.push({
                 node,

lib/rules/no-danger.js

@@ -29,7 +29,7 @@ const DANGEROUS_PROPERTIES = fromEntries(DANGEROUS_PROPERTY_NAMES.map((prop) =>
 /**
  * Checks if a JSX attribute is dangerous.
  * @param {String} name - Name of the attribute to check.
- * @returns {boolean} Whether or not the attribute is dnagerous.
+ * @returns {boolean} Whether or not the attribute is dangerous.
  */
 function isDangerous(name) {
   return has(DANGEROUS_PROPERTIES, name);

lib/rules/no-direct-mutation-state.js

@@ -56,7 +56,7 @@ module.exports = {
     }
 
     /**
-     * Walks throughs the MemberExpression to the top-most property.
+     * Walks through the MemberExpression to the top-most property.
      * @param {Object} node The node to process
      * @returns {Object} The outer-most MemberExpression
      */

lib/rules/no-unescaped-entities.js

@@ -81,7 +81,7 @@ module.exports = {
       const configuration = context.options[0] || {};
       const entities = configuration.forbid || DEFAULTS;
 
-      // HTML entites are already escaped in node.value (as well as node.raw),
+      // HTML entities are already escaped in node.value (as well as node.raw),
       // so pull the raw text from context.getSourceCode()
       for (let i = node.loc.start.line; i <= node.loc.end.line; i++) {
         let rawLine = context.getSourceCode().lines[i - 1];

lib/rules/no-unstable-nested-components.js

@@ -432,7 +432,7 @@ module.exports = {
         || isMapCall(node)
         || isMapCall(node.parent)
 
-        // Do not mark components declared inside hooks (or falsly '() => null' clean-up methods)
+        // Do not mark components declared inside hooks (or falsy '() => null' clean-up methods)
         || isReturnStatementOfHook(node, context)
 
         // Do not mark objects containing render methods
@@ -441,7 +441,7 @@ module.exports = {
         // Prevent reporting nested class components twice
         || isInsideRenderMethod(node)
 
-        // Prevent falsely reporting deteceted "components" which do not return JSX
+        // Prevent falsely reporting detected "components" which do not return JSX
         || isStatelessComponentReturningNull(node)
       ) {
         return;

lib/rules/prefer-stateless-function.js

@@ -168,7 +168,7 @@ module.exports = {
      * @see eslint no-useless-constructor rule
      * @param {Array} body - constructor body content.
      * @param {Array} ctorParams - The params to check against super call.
-     * @returns {boolean} true if the construtor body is redundant
+     * @returns {boolean} true if the constructor body is redundant
      */
     function isRedundantSuperCall(body, ctorParams) {
       return (

lib/util/Components.js

@@ -386,7 +386,7 @@ function componentRule(rule, context) {
     },
 
     /**
-     * It will check wheater memo/forwardRef is wrapping existing component or
+     * It will check whether memo/forwardRef is wrapping existing component or
      * creating a new one.
      * @param {object} node
      * @returns {boolean}

lib/util/ast.js

@@ -44,7 +44,7 @@ function loopNodes(nodes) {
 }
 
 /**
- * Find a return statment in the current node
+ * Find a return statement in the current node
  *
  * @param {ASTNode} node The AST node being checked
  * @returns {ASTNode | false}

lib/util/propTypesSort.js

@@ -66,7 +66,7 @@ function getShapeProperties(node) {
  * @param {Context} context The context of the two nodes.
  * @param {Boolean=} ignoreCase whether or not to ignore case when comparing the two elements.
  * @param {Boolean=} requiredFirst whether or not to sort required elements first.
- * @param {Boolean=} callbacksLast whether or not to sort callbacks after everyting else.
+ * @param {Boolean=} callbacksLast whether or not to sort callbacks after everything else.
  * @returns {Number} the sort order of the two elements.
  */
 function sorter(a, b, context, ignoreCase, requiredFirst, callbacksLast) {
@@ -112,7 +112,7 @@ function sorter(a, b, context, ignoreCase, requiredFirst, callbacksLast) {
  * @param {Array} declarations The context of the two nodes.
  * @param {Boolean=} ignoreCase whether or not to ignore case when comparing the two elements.
  * @param {Boolean=} requiredFirst whether or not to sort required elements first.
- * @param {Boolean=} callbacksLast whether or not to sort callbacks after everyting else.
+ * @param {Boolean=} callbacksLast whether or not to sort callbacks after everything else.
  * @param {Boolean=} sortShapeProp whether or not to sort propTypes defined in PropTypes.shape.
  * @returns {Object|*|{range, text}} the sort order of the two elements.
  */

tests/lib/rules/no-typos.js

@@ -207,13 +207,13 @@ ruleTester.run('no-typos', rule, {
         const propTypes = "PROPTYPES"
         const contextTypes = "CONTEXTTYPES"
         const childContextTypes = "CHILDCONTEXTTYPES"
-        const defautProps = "DEFAULTPROPS"
+        const defaultProps = "DEFAULTPROPS"
 
         class First extends React.Component {}
         First[propTypes] = {};
         First[contextTypes] = {};
         First[childContextTypes] = {};
-        First[defautProps] = {};
+        First[defaultProps] = {};
       `,
       parserOptions,
     },
@@ -563,10 +563,10 @@ ruleTester.run('no-typos', rule, {
             #somethingPrivate() {
               // ...
             }
-        
+
             render() {
             const { value = '' } = this.props;
-        
+
             return (
               <textarea>
                 {value}

tests/lib/rules/no-unused-prop-types.js

@@ -2363,7 +2363,7 @@ ruleTester.run('no-unused-prop-types', rule, {
       features: ['class fields'],
     },
     {
-      // Destrucuted props inside of async class method
+      // Destructured props inside of async class method
       code: `
         export class Example extends Component {
           static propTypes = {
@@ -3825,7 +3825,7 @@ ruleTester.run('no-unused-prop-types', rule, {
             },
           },
         };
-        
+
         export const Daily = ({ history, match: {
           params: {
             date = moment().toISOString(),
@@ -3855,7 +3855,7 @@ ruleTester.run('no-unused-prop-types', rule, {
           test: string,
           callback: () => void,
         };
-        
+
         export default function Foo(props: Props) {
           return (
             <div>
@@ -3900,13 +3900,13 @@ ruleTester.run('no-unused-prop-types', rule, {
               selectedId: '',
             };
           }
-        
+
           onChange = ({id}: {id: string}) => { // This will say: 'id' PropType is defined but prop is never used (react/no-unused-prop-types)
             this.setState({
               selectedId: id,
             });
           };
-        
+
           render() {
             const {selectedId} = this.state;
             return (
@@ -3926,7 +3926,7 @@ ruleTester.run('no-unused-prop-types', rule, {
       code: `
         function Foo (props) {
           return <div>{ renderPhoto() }</div>;
-        
+
           function renderPhoto () {
             return <div>{ props.renderPhotoTools() }</div>;
           }

tests/lib/rules/prefer-stateless-function.js

@@ -76,7 +76,7 @@ ruleTester.run('prefer-stateless-function', rule, {
       options: [{ ignorePureComponents: true }],
     },
     {
-      // Has a lifecyle method
+      // Has a lifecycle method
       code: `
         class Foo extends React.Component {
           shouldComponentUpdate() {

tests/lib/rules/prop-types.js

@@ -2112,7 +2112,7 @@ ruleTester.run('prop-types', rule, {
     },
     {
       code: `
-        const withOverlayState = <P: {foo: string}>(WrappedComponent: ComponentType<P>): CpmponentType<P> => (
+        const withOverlayState = <P: {foo: string}>(WrappedComponent: ComponentType<P>): ComponentType<P> => (
           class extends React.Component<P> {
             constructor(props) {
               super(props);
@@ -6552,7 +6552,7 @@ ruleTester.run('prop-types', rule, {
       },
       {
         code: `
-          const withOverlayState = <P: {foo: string}>(WrappedComponent: ComponentType<P>): CpmponentType<P> => (
+          const withOverlayState = <P: {foo: string}>(WrappedComponent: ComponentType<P>): ComponentType<P> => (
             class extends React.Component<P> {
               constructor(props) {
                 super(props);

tests/lib/rules/require-optimization.js

@@ -47,7 +47,7 @@ ruleTester.run('react-require-optimization', rule, {
         import React, {Component} from "react";
         @reactMixin.decorate(PureRenderMixin)
         class YourComponent extends Component {
-          componetnDidMount () {}
+          componentDidMount () {}
           render() {}
         }
       `,

tests/lib/rules/static-property-placement.js

@@ -44,7 +44,7 @@ const ruleTester = new RuleTester(ruleTesterConfig);
 ruleTester.run('static-property-placement', rule, {
   valid: parsers.all([
     // ------------------------------------------------------------------------------
-    // Ignore creatClass/createReactClass and Static Functional Components
+    // Ignore createClass/createReactClass and Static Functional Components
     // ------------------------------------------------------------------------------
     {
       // Do not error on createReactClass pragma
@@ -1149,7 +1149,7 @@ ruleTester.run('static-property-placement', rule, {
 
   invalid: parsers.all([
     // ------------------------------------------------------------------------------
-    // expected static field when got property assigment
+    // expected static field when got property assignment
     // ------------------------------------------------------------------------------
     {
       // Error if multiple properties are incorrectly positioned according to config
@@ -1929,7 +1929,7 @@ ruleTester.run('static-property-placement', rule, {
     // combined - mixed
     // ------------------------------------------------------------------------------
     {
-      // Error if mixed property positions but dont match config
+      // Error if mixed property positions but don't match config
       code: `
         class MyComponent extends React.Component {
           static childContextTypes = {
@@ -1992,7 +1992,7 @@ ruleTester.run('static-property-placement', rule, {
       ],
     },
     {
-      // Error if mixed property positions but dont match config
+      // Error if mixed property positions but don't match config
       code: `
         class MyComponent extends React.Component {
           static childContextTypes = {

tests/util/ast.js

@@ -58,7 +58,7 @@ describe('ast', () => {
       spy.resetHistory();
 
       traverseReturns(parseCode(`
-        ({prop}) => 'someething'
+        ({prop}) => 'something'
       `).expression, mockContext, spy);
 
       assert(spy.calledOnce);