diff --git a/beta/src/content/apis/react/Component.md b/beta/src/content/apis/react/Component.md
index 7a929cfb..a5d9ac37 100644
--- a/beta/src/content/apis/react/Component.md
+++ b/beta/src/content/apis/react/Component.md
@@ -278,18 +278,28 @@ We recommend to define components as functions instead of classes. [See how to m
 
 Typically, you will [define components as functions](/learn/your-first-component#defining-a-component) instead.
 
-For example, suppose you're converting this class to a function:
+For example, suppose you're converting this `Greeting` class component to a function:
 
 <Sandpack>
 
 ```js
 import { Component } from 'react';
 
-export default class Greeting extends Component {
+class Greeting extends Component {
   render() {
     return <h1>Hello, {this.props.name}!</h1>;
   }
 }
+
+export default function App() {
+  return (
+    <>
+      <Greeting name="Sara" />
+      <Greeting name="Cahal" />
+      <Greeting name="Edite" />
+    </>
+  );
+}
 ```
 
 </Sandpack>
@@ -336,7 +346,7 @@ export default function App() {
 
 ### Migrating a component with state from a class to a function {/*migrating-a-component-with-state-from-a-class-to-a-function*/}
 
-Suppose you're converting this class to a function:
+Suppose you're converting this `Counter` class component to a function:
 
 <Sandpack>
 
@@ -458,7 +468,7 @@ button { display: block; margin-top: 10px; }
 
 ### Migrating a component with lifecycle methods from a class to a function {/*migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function*/}
 
-Suppose you're converting this component with lifecycle methods to a function:
+Suppose you're converting this `ChatRoom` class component with lifecycle methods to a function:
 
 <Sandpack>