From 415751c1903312b639ecb84f73218c13a2a90bc0 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 18 Oct 2022 18:58:40 +0100
Subject: [PATCH] [Beta] Remove superfluous IllustrationBlock title prop

---
 beta/src/components/MDX/MDXComponents.tsx              |  7 -------
 beta/src/content/learn/reacting-to-input-with-state.md | 10 +++++-----
 beta/src/content/learn/state-as-a-snapshot.md          |  2 +-
 3 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx
index 237f98ae..80d72b9f 100644
--- a/beta/src/components/MDX/MDXComponents.tsx
+++ b/beta/src/components/MDX/MDXComponents.tsx
@@ -229,13 +229,11 @@ function Illustration({
 }
 
 function IllustrationBlock({
-  title,
   sequential,
   author,
   authorLink,
   children,
 }: {
-  title: string;
   author: string;
   authorLink: string;
   sequential: boolean;
@@ -258,11 +256,6 @@ function IllustrationBlock({
   ));
   return (
     <div className="my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
-      {title ? (
-        <h3 className="text-center text-xl font-bold leading-9 mb-4">
-          {title}
-        </h3>
-      ) : null}
       {sequential ? (
         <ol className="mdx-illustration-block flex">
           {images.map((x: any, i: number) => (
diff --git a/beta/src/content/learn/reacting-to-input-with-state.md b/beta/src/content/learn/reacting-to-input-with-state.md
index 10c728eb..ba112c34 100644
--- a/beta/src/content/learn/reacting-to-input-with-state.md
+++ b/beta/src/content/learn/reacting-to-input-with-state.md
@@ -311,16 +311,16 @@ Pages like this are often called "living styleguides" or "storybooks".
 
 ### Step 2: Determine what triggers those state changes {/*step-2-determine-what-triggers-those-state-changes*/}
 
-<IllustrationBlock title="Types of inputs">
-  <Illustration caption="Human inputs" alt="A finger." src="/images/docs/illustrations/i_inputs1.png" />
-  <Illustration caption="Computer inputs" alt="Ones and zeroes." src="/images/docs/illustrations/i_inputs2.png" />
-</IllustrationBlock>
-
 You can trigger state updates in response to two kinds of inputs:
 
 * **Human inputs,** like clicking a button, typing in a field, navigating a link.
 * **Computer inputs,** like a network response arriving, a timeout completing, an image loading.
 
+<IllustrationBlock>
+  <Illustration caption="Human inputs" alt="A finger." src="/images/docs/illustrations/i_inputs1.png" />
+  <Illustration caption="Computer inputs" alt="Ones and zeroes." src="/images/docs/illustrations/i_inputs2.png" />
+</IllustrationBlock>
+
 In both cases, **you must set [state variables](/learn/state-a-components-memory#anatomy-of-usestate) to update the UI.** For the form you're developing, you will need to change state in response to a few different inputs:
 
 * **Changing the text input** (human) should switch it from the *Empty* state to the *Typing* state or back, depending on whether the text box is empty or not.
diff --git a/beta/src/content/learn/state-as-a-snapshot.md b/beta/src/content/learn/state-as-a-snapshot.md
index 1e94fb3b..556553d3 100644
--- a/beta/src/content/learn/state-as-a-snapshot.md
+++ b/beta/src/content/learn/state-as-a-snapshot.md
@@ -81,7 +81,7 @@ When React re-renders a component:
 2. Your function returns a new JSX snapshot.
 3. React then updates the screen to match the snapshot you've returned.
 
-<IllustrationBlock title="Re-rendering" sequential>
+<IllustrationBlock sequential>
     <Illustration caption="React executing the function" src="/images/docs/illustrations/i_render1.png" />
     <Illustration caption="Calculating the snapshot" src="/images/docs/illustrations/i_render2.png" />
     <Illustration caption="Updating the DOM tree" src="/images/docs/illustrations/i_render3.png" />