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
Hello
;
+ }
+ 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 Hello
;
+ }
+}
+```
+
## 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 Hello
;
+ }
+ 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 Hello
;
+ }
+}
+```
+
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 Hello
;
+ }
+}
+```
+
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 Hello
;
+ }
+}
+```
+
If you want to flow annotations to be at the top:
```js