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 00000000..e383193f --- /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 00000000..cb7c56ba --- /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 00000000..c1f071d7 --- /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 00000000..da3dbe1b --- /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 00000000..52d156c7 --- /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 00000000..6b4119a2 --- /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 00000000..4de3c042 --- /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 00000000..6660dc18 --- /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 a67a9636..fa34f749 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 e2214916..4787415d 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 1e571ab8..16e1d5b1 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 cd4eda30..9346193c 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 ef60adee..00000000 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 248a5507..00000000 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 e35c325d..00000000 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 94ea7fcd..00000000 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 1bd0dd57..00000000 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 02b3983c..00000000 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 a0c6cdde..00000000 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 90e7c48d..00000000 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 e955dfef..00000000 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 ffb5c934..00000000 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 4d409435..00000000 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 aacc9191..00000000 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 01d7a8d5..00000000 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 dfd5fa64..00000000 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 4b13e2bf..00000000 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 669e7bb8..00000000 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 34f375ad..00000000 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 647932bd..00000000 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 89ea4a24..00000000 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 3388ce9d..5d50c571 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 3a5e5e89..f54c0bff 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.