diff --git a/beta/public/images/docs/diagrams/sharing_state_child.dark.svg b/beta/public/images/docs/diagrams/sharing_state_child.dark.svg new file mode 100644 index 000000000..e383193fe --- /dev/null +++ b/beta/public/images/docs/diagrams/sharing_state_child.dark.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/sharing_state_child.svg b/beta/public/images/docs/diagrams/sharing_state_child.svg new file mode 100644 index 000000000..cb7c56ba2 --- /dev/null +++ b/beta/public/images/docs/diagrams/sharing_state_child.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/sharing_state_child_clicked.dark.svg b/beta/public/images/docs/diagrams/sharing_state_child_clicked.dark.svg new file mode 100644 index 000000000..c1f071d79 --- /dev/null +++ b/beta/public/images/docs/diagrams/sharing_state_child_clicked.dark.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/sharing_state_child_clicked.svg b/beta/public/images/docs/diagrams/sharing_state_child_clicked.svg new file mode 100644 index 000000000..da3dbe1b1 --- /dev/null +++ b/beta/public/images/docs/diagrams/sharing_state_child_clicked.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/sharing_state_parent.dark.svg b/beta/public/images/docs/diagrams/sharing_state_parent.dark.svg new file mode 100644 index 000000000..52d156c7c --- /dev/null +++ b/beta/public/images/docs/diagrams/sharing_state_parent.dark.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/sharing_state_parent.svg b/beta/public/images/docs/diagrams/sharing_state_parent.svg new file mode 100644 index 000000000..6b4119a27 --- /dev/null +++ b/beta/public/images/docs/diagrams/sharing_state_parent.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/sharing_state_parent_clicked.dark.svg b/beta/public/images/docs/diagrams/sharing_state_parent_clicked.dark.svg new file mode 100644 index 000000000..4de3c0423 --- /dev/null +++ b/beta/public/images/docs/diagrams/sharing_state_parent_clicked.dark.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/sharing_state_parent_clicked.svg b/beta/public/images/docs/diagrams/sharing_state_parent_clicked.svg new file mode 100644 index 000000000..6660dc181 --- /dev/null +++ b/beta/public/images/docs/diagrams/sharing_state_parent_clicked.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/writing_jsx_js.dark.svg b/beta/public/images/docs/diagrams/writing_jsx_js.dark.svg index a67a96361..fa34f749b 100644 --- a/beta/public/images/docs/diagrams/writing_jsx_js.dark.svg +++ b/beta/public/images/docs/diagrams/writing_jsx_js.dark.svg @@ -1,8 +1,8 @@ - - - + + + diff --git a/beta/public/images/docs/diagrams/writing_jsx_js.svg b/beta/public/images/docs/diagrams/writing_jsx_js.svg index e22149166..4787415d9 100644 --- a/beta/public/images/docs/diagrams/writing_jsx_js.svg +++ b/beta/public/images/docs/diagrams/writing_jsx_js.svg @@ -1,8 +1,8 @@ - - - + + + diff --git a/beta/public/images/docs/diagrams/writing_jsx_sidebar.dark.svg b/beta/public/images/docs/diagrams/writing_jsx_sidebar.dark.svg index 1e571ab87..16e1d5b15 100644 --- a/beta/public/images/docs/diagrams/writing_jsx_sidebar.dark.svg +++ b/beta/public/images/docs/diagrams/writing_jsx_sidebar.dark.svg @@ -1,14 +1,14 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/writing_jsx_sidebar.svg b/beta/public/images/docs/diagrams/writing_jsx_sidebar.svg index cd4eda307..9346193cd 100644 --- a/beta/public/images/docs/diagrams/writing_jsx_sidebar.svg +++ b/beta/public/images/docs/diagrams/writing_jsx_sidebar.svg @@ -1,14 +1,14 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/beta/public/images/docs/sketches/exports.png b/beta/public/images/docs/sketches/exports.png deleted file mode 100644 index ef60adee1..000000000 Binary files a/beta/public/images/docs/sketches/exports.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_add-back-ui.png b/beta/public/images/docs/sketches/s_add-back-ui.png deleted file mode 100644 index 248a55073..000000000 Binary files a/beta/public/images/docs/sketches/s_add-back-ui.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_keys-in-trees.png b/beta/public/images/docs/sketches/s_keys-in-trees.png deleted file mode 100644 index e35c325d5..000000000 Binary files a/beta/public/images/docs/sketches/s_keys-in-trees.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_lifting-state-up.png b/beta/public/images/docs/sketches/s_lifting-state-up.png deleted file mode 100644 index 94ea7fcd9..000000000 Binary files a/beta/public/images/docs/sketches/s_lifting-state-up.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_lifting-v-providing.png b/beta/public/images/docs/sketches/s_lifting-v-providing.png deleted file mode 100644 index 1bd0dd576..000000000 Binary files a/beta/public/images/docs/sketches/s_lifting-v-providing.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_passing-functions-down.png b/beta/public/images/docs/sketches/s_passing-functions-down.png deleted file mode 100644 index 02b3983c0..000000000 Binary files a/beta/public/images/docs/sketches/s_passing-functions-down.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_placeholder-ui.png b/beta/public/images/docs/sketches/s_placeholder-ui.png deleted file mode 100644 index a0c6cdde6..000000000 Binary files a/beta/public/images/docs/sketches/s_placeholder-ui.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_prop-drilling.png b/beta/public/images/docs/sketches/s_prop-drilling.png deleted file mode 100644 index 90e7c48d6..000000000 Binary files a/beta/public/images/docs/sketches/s_prop-drilling.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_providing-context.png b/beta/public/images/docs/sketches/s_providing-context.png deleted file mode 100644 index e955dfefb..000000000 Binary files a/beta/public/images/docs/sketches/s_providing-context.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_re-rendering.jpg b/beta/public/images/docs/sketches/s_re-rendering.jpg deleted file mode 100644 index ffb5c9344..000000000 Binary files a/beta/public/images/docs/sketches/s_re-rendering.jpg and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_react-batching.jpg b/beta/public/images/docs/sketches/s_react-batching.jpg deleted file mode 100644 index 4d409435a..000000000 Binary files a/beta/public/images/docs/sketches/s_react-batching.jpg and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_react-is-blind-to-ui-swap.png b/beta/public/images/docs/sketches/s_react-is-blind-to-ui-swap.png deleted file mode 100644 index aacc9191a..000000000 Binary files a/beta/public/images/docs/sketches/s_react-is-blind-to-ui-swap.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_react-ui-response.jpg b/beta/public/images/docs/sketches/s_react-ui-response.jpg deleted file mode 100644 index 01d7a8d58..000000000 Binary files a/beta/public/images/docs/sketches/s_react-ui-response.jpg and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_state-in-tree.png b/beta/public/images/docs/sketches/s_state-in-tree.png deleted file mode 100644 index dfd5fa648..000000000 Binary files a/beta/public/images/docs/sketches/s_state-in-tree.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_ui-component-swap.png b/beta/public/images/docs/sketches/s_ui-component-swap.png deleted file mode 100644 index 4b13e2bf3..000000000 Binary files a/beta/public/images/docs/sketches/s_ui-component-swap.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_ui-components-swap.png b/beta/public/images/docs/sketches/s_ui-components-swap.png deleted file mode 100644 index 669e7bb88..000000000 Binary files a/beta/public/images/docs/sketches/s_ui-components-swap.png and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_ui-response.jpg b/beta/public/images/docs/sketches/s_ui-response.jpg deleted file mode 100644 index 34f375ad2..000000000 Binary files a/beta/public/images/docs/sketches/s_ui-response.jpg and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_ui-snapshots.jpg b/beta/public/images/docs/sketches/s_ui-snapshots.jpg deleted file mode 100644 index 647932bd2..000000000 Binary files a/beta/public/images/docs/sketches/s_ui-snapshots.jpg and /dev/null differ diff --git a/beta/public/images/docs/sketches/s_ui-state-snapshot.jpg b/beta/public/images/docs/sketches/s_ui-state-snapshot.jpg deleted file mode 100644 index 89ea4a24f..000000000 Binary files a/beta/public/images/docs/sketches/s_ui-state-snapshot.jpg and /dev/null differ diff --git a/beta/src/components/MDX/Diagram.tsx b/beta/src/components/MDX/Diagram.tsx index 3388ce9da..5d50c5713 100644 --- a/beta/src/components/MDX/Diagram.tsx +++ b/beta/src/components/MDX/Diagram.tsx @@ -16,9 +16,11 @@ interface DiagramProps { function Caption({text}: {text: string}) { return ( -
- {text} -
+
+
+ {text} +
+
); } diff --git a/beta/src/pages/learn/sharing-state-between-components.md b/beta/src/pages/learn/sharing-state-between-components.md index 3a5e5e896..f54c0bff2 100644 --- a/beta/src/pages/learn/sharing-state-between-components.md +++ b/beta/src/pages/learn/sharing-state-between-components.md @@ -75,6 +75,22 @@ h3, p { margin: 5px 0px; } Notice how pressing one panel's button does not affect the other panel--they are independent. + + + + +Initially, each `Panel`'s `isActive` state is `false`, so they both appear collapsed + + + + + +Clicking either `Panel`'s button will only update that `Panel`'s `isActive` state alone, so each panel expands independently + + + + + **But now let's say you want to change it so that only one panel is expanded at any given time.** With that design, expanding the second panel should collapse the first one. How would you do that? To coordinate these two panels, you need to "lift their state up" to a parent component in three steps: @@ -85,8 +101,6 @@ To coordinate these two panels, you need to "lift their state up" to a parent co This will allow the `Accordion` component to coordinate both `Panel`s and only expand one at a time. -On the left are two components each owning their own state values. On the right, they are the children of a parent component that owns both their state values. - ### Step 1: Remove state from the child components {/*step-1-remove-state-from-the-child-components*/} You will give control of the `Panel`'s `isActive` to its parent component. This means that the parent component will pass `isActive` to `Panel` as a prop instead. Start by **removing this line** from the `Panel` component: @@ -164,8 +178,6 @@ Try editing the hardcoded `isActive` values in the `Accordion` component and see Lifting state up often changes the nature of what you're storing as state. -The parent component passes the state setting function to both child components. - In this case, only one panel should be active at a time. This means that the `Accordion` common parent component needs to keep track of *which* panel is the active one. Instead of a `boolean` value, it could use a number as the index of the active `Panel` for the state variable: ```js @@ -256,6 +268,22 @@ h3, p { margin: 5px 0px; } This completes lifting state up! Moving state into the common parent component allowed you to coordinate the two panels. Using the active index instead of two "is shown" flags ensured that only one panel is active at a given time. And passing down the event handler to the child allowed the child to change the parent's state. + + + + +Initially, `Accordion`'s `activeIndex` is `0`, so the first `Panel` receives `isActive = true` + + + + + +When `Accordion`'s `activeIndex` state changes to `1`, the second `Panel` receives `isActive = true` instead + + + + + It is common to call a component with some local state "uncontrolled". For example, the original `Panel` component with an `isActive` state variable is uncontrolled because its parent cannot influence whether the panel is active or not.