diff --git a/beta/public/images/docs/diagrams/responding_to_input_flow.dark.svg b/beta/public/images/docs/diagrams/responding_to_input_flow.dark.svg new file mode 100644 index 00000000..7b0a2645 --- /dev/null +++ b/beta/public/images/docs/diagrams/responding_to_input_flow.dark.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/diagrams/responding_to_input_flow.svg b/beta/public/images/docs/diagrams/responding_to_input_flow.svg new file mode 100644 index 00000000..a353950e --- /dev/null +++ b/beta/public/images/docs/diagrams/responding_to_input_flow.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/beta/public/images/docs/sketches/s_flow-chart.jpg b/beta/public/images/docs/sketches/s_flow-chart.jpg deleted file mode 100644 index 1e5d94bd..00000000 Binary files a/beta/public/images/docs/sketches/s_flow-chart.jpg and /dev/null differ diff --git a/beta/src/pages/learn/reacting-to-input-with-state.md b/beta/src/pages/learn/reacting-to-input-with-state.md index 9695454e..7c60ed77 100644 --- a/beta/src/pages/learn/reacting-to-input-with-state.md +++ b/beta/src/pages/learn/reacting-to-input-with-state.md @@ -332,7 +332,15 @@ In both cases, **you must set [state variables](/learn/state-a-components-memory To help visualize this flow, try drawing each state on paper as a labeled circle, and each change between two states as an arrow. You can sketch out many flows this way and sort out bugs long before implementation. -A flow chart showing states and transitions between them + + + + +Form States + + + + ### Step 3: Represent the state in memory with `useState` {/*step-3-represent-the-state-in-memory-with-usestate*/}