{children}
);
diff --git a/beta/src/pages/learn/preserving-and-resetting-state.md b/beta/src/pages/learn/preserving-and-resetting-state.md
index 6356630f..16da2f9d 100644
--- a/beta/src/pages/learn/preserving-and-resetting-state.md
+++ b/beta/src/pages/learn/preserving-and-resetting-state.md
@@ -23,7 +23,15 @@ Browsers use many tree structures to model UI. The [DOM](https://developer.mozil
React also uses tree structures to manage and model the UI you make. React makes **UI trees** from your JSX. Then React DOM updates the browser DOM elements to match that UI tree. (React Native translates these trees into elements specific to mobile platforms.)
-
+
+
+
+
+` contained a `Counter`. But when you swapped in a `p`, React removed the `Counter` from the UI tree and destroyed its state.
-
+
+
+
+
+When Counter changes to p, first the Counter is unmounted, then the p is mounted.
+
+
+
+
+
+
+
+
+
+When switching back, first the p is unmounted, then the Counter is mounted.
+
+
+
+
Also, **when you render a different component in the same position, it resets the state of its entire subtree**. To see how this works, increment the counter and then tick the checkbox:
@@ -620,7 +690,25 @@ label {
The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `div` to a `section`. When the child `div` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well.
-
+
+
+
+
+When section changes to div, first the section is unmounted then the new div is mounted.
+
+
+
+
+
+
+
+
+
+When switching back, first the div is unmounted then the new section is mounted.
+
+
+
+
As a rule of thumb, **if you want to preserve the state between re-renders, the structure of your tree needs to "match up"** from one render to another. If the structure is different, the state gets destroyed because React destroys state when it removes a component from the tree.
@@ -741,8 +829,6 @@ h1 {
Currently, when you change the player, the score is preserved. The two `Counter`s appear in the same position, so React sees them as *the same* `Counter` whose `person` prop has changed.
-
+
+
+
+
+Initial State
+
+
+
+
+
+Clicking "next"
+
+
+
+
+
+Clicking "next" again
+
+
+
+
> Each `Counter`'s state gets destroyed each time its removed from the DOM. This is why they reset every time you click the button.
@@ -921,8 +1027,6 @@ Switching between Taylor and Sarah does not preserve the state. This is because
Specifying a `key` tells React to use the `key` itself as part of the position, instead of their order within the parent. This is why, even though you render them in the same place in JSX, from React's perspective, these are two different counters. As a result, they will never share state. Every time a counter appears on the screen, its state is created. Every time it is removed, its state is destroyed. Toggling between them resets their state over and over.
-
+
+
+