From 87fb344c9509f8c31e9bd4a49d31576397a89ebc Mon Sep 17 00:00:00 2001
From: Martin <mr.mmaurer+work@gmail.com>
Date: Fri, 15 Jul 2022 23:19:14 +0100
Subject: [PATCH] [Docs] `sort-comp`: add class component examples

---
 CHANGELOG.md            |  2 ++
 docs/rules/sort-comp.md | 60 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index de18616929..8743fa5eaf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,7 +20,9 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [Refactor] [`jsx-indent-props`]: improved readability of the checkNodesIndent function ([#3315][] @caroline223)
 * [Tests] [`jsx-indent`], [`jsx-one-expression-per-line`]: add passing test cases ([#3314][] @ROSSROSALES)
 * [Refactor] `boolean-prop-naming`, `jsx-indent`: avoid assigning to arguments ([#3316][] @caroline223)
+* [Docs] `sort-comp`: add class component examples ([#3339][] @maurer2)
 
+[#3339]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3339
 [#3331]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3331
 [#3328]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3328
 [#3327]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3327
diff --git a/docs/rules/sort-comp.md b/docs/rules/sort-comp.md
index 9eef7c4bfb..974d6d14b9 100644
--- a/docs/rules/sort-comp.md
+++ b/docs/rules/sort-comp.md
@@ -24,6 +24,15 @@ var Hello = createReactClass({
 });
 ```
 
+```jsx
+class Hello extends React.Component {
+  render() {
+    return <div>Hello</div>;
+  }
+  static displayName = 'Hello';
+}
+```
+
 Examples of **correct** code for this rule:
 
 ```jsx
@@ -35,6 +44,15 @@ var Hello = createReactClass({
 });
 ```
 
+```jsx
+class Hello extends React.Component {
+  static displayName = 'Hello';
+  render() {
+    return <div>Hello</div>;
+  }
+}
+```
+
 ## Rule Options
 
 This rule can take one argument to customize the components organisation.
@@ -128,6 +146,16 @@ var Hello = createReactClass({
 });
 ```
 
+```jsx
+class Hello extends React.Component {
+  render() {
+    return <div>Hello</div>;
+  }
+  onClick = this.onClick.bind(this);
+  onClick() {}
+}
+```
+
 Examples of **correct** code for this rule, with the above configuration:
 
 ```jsx
@@ -139,6 +167,16 @@ var Hello = createReactClass({
 });
 ```
 
+```jsx
+class Hello extends React.Component {
+  onClick = this.onClick.bind(this);
+  onClick() {}
+  render() {
+    return <div>Hello</div>;
+  }
+}
+```
+
 If you want to split your `render` method into smaller ones and keep them just before render:
 
 ```js
@@ -170,6 +208,17 @@ var Hello = createReactClass({
 });
 ```
 
+```jsx
+class Hello extends React.Component {
+  renderButton = () => {}
+  onClick = this.onClick.bind(this);
+  onClick() {}
+  render() {
+    return <div>Hello</div>;
+  }
+}
+```
+
 Examples of **correct** code for this rule, with the above configuration:
 
 ```jsx
@@ -182,6 +231,17 @@ var Hello = createReactClass({
 });
 ```
 
+```jsx
+class Hello extends React.Component {
+  onClick = this.onClick.bind(this);
+  onClick() {}
+  renderButton = () => {}
+  render() {
+    return <div>Hello</div>;
+  }
+}
+```
+
 If you want to flow annotations to be at the top:
 
 ```js