From 3d58253b399dce089a12793163d7f51f90d3f2b9 Mon Sep 17 00:00:00 2001
From: Lucas Mesquita <lucasoliveira98@outlook.com>
Date: Tue, 30 Aug 2022 11:26:04 -0300
Subject: [PATCH] [Docs] `jsx-sort-propts`: replace ref string with ref
 variable

---
 CHANGELOG.md                 | 12 +++++++++---
 docs/rules/jsx-sort-props.md |  6 +++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cc8d53543c..3f0f0df401 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,16 +6,22 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 ## Unreleased
 
 ### Fixed
-* [`jsx-key`]: avoid a crash with optional chaining ([#3371][], @ljharb)
+* [`jsx-key`]: avoid a crash with optional chaining ([#3371][] @ljharb)
+
+
+### Changed
+* [Docs] [`jsx-sort-propts`]: replace ref string with ref variable ([#3375][] @Luccasoli)
+
+[#3375]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3375
+[#3371]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3371
 
 ## [7.31.1] - 2022.08.26
 
 ### Fixed
 * [`jsx-key`]: fix detecting missing key in `Array.from`'s mapping function ([#3369][] @sjarva)
-* [`jsx-no-leaked-render`]: coerce strategy now allows a ternary ([#3370][], @sjarva)
+* [`jsx-no-leaked-render`]: coerce strategy now allows a ternary ([#3370][] @sjarva)
 
 [7.31.1]: https://github.com/jsx-eslint/eslint-plugin-react/compare/v7.31.0...v7.31.1
-[#3371]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3371
 [#3370]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3370
 [#3369]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3369
 
diff --git a/docs/rules/jsx-sort-props.md b/docs/rules/jsx-sort-props.md
index 4810b667f9..0250a66007 100644
--- a/docs/rules/jsx-sort-props.md
+++ b/docs/rules/jsx-sort-props.md
@@ -125,8 +125,8 @@ This can be a boolean or an array option.
 When `reservedFirst` is defined, React reserved props (`children`, `dangerouslySetInnerHTML` - **only for DOM components**, `key`, and `ref`) must be listed before all other props, but still respecting the alphabetical order:
 
 ```jsx
-<Hello key={0} ref="John" name="John">
-  <div dangerouslySetInnerHTML={{__html: 'ESLint Plugin React!'}} ref="dangerDiv" />
+<Hello key={0} ref={johnRef} name="John">
+  <div dangerouslySetInnerHTML={{__html: 'ESLint Plugin React!'}} ref={dangerDivRef} />
 </Hello>
 ```
 
@@ -135,7 +135,7 @@ If given as an array, the array's values will override the default list of reser
 With `reservedFirst: ["key"]`, the following will **not** warn:
 
 ```jsx
-<Hello key={'uuid'} name="John" ref="ref" />
+<Hello key={'uuid'} name="John" ref={johnRef} />
 ```
 
 ### `locale`