diff --git a/CHANGELOG.md b/CHANGELOG.md
index 67ea0fd736..82f1fe7f99 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,8 +10,10 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ### Changed
 * [Docs] [`jsx-tag-spacing`]: rename option from [#3264][] ([#3294[] @ljharb)
+* [Docs] [`jsx-key`]: split the examples ([#3293][] @ioggstream)
 
 [#3294]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3294
+[#3293]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3293
 [#3291]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3291
 
 ## [7.30.0] - 2022.05.18
diff --git a/docs/rules/jsx-key.md b/docs/rules/jsx-key.md
index 70c4160fb3..b64307b419 100644
--- a/docs/rules/jsx-key.md
+++ b/docs/rules/jsx-key.md
@@ -9,9 +9,13 @@ Examples of **incorrect** code for this rule:
 
 ```jsx
 [<Hello />, <Hello />, <Hello />];
+```
 
+```jsx
 data.map(x => <Hello>{x}</Hello>);
+```
 
+```jsx
 <Hello {...{ key: id, id, caption }} />
 ```
 
@@ -21,9 +25,13 @@ Examples of **correct** code for this rule:
 
 ```jsx
 [<Hello key="first" />, <Hello key="second" />, <Hello key="third" />];
+```
 
+```jsx
 data.map((x) => <Hello key={x.id}>{x}</Hello>);
+```
 
+```jsx
 <Hello key={id} {...{ id, caption }} />
 ```
 
@@ -43,7 +51,9 @@ Examples of **incorrect** code for this rule:
 
 ```jsx
 [<></>, <></>, <></>];
+```
 
+```jsx
 data.map(x => <>{x}</>);
 ```