diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md
index 657d3ddcb00..e0cda57a58d 100644
--- a/src/content/learn/referencing-values-with-refs.md
+++ b/src/content/learn/referencing-values-with-refs.md
@@ -655,6 +655,39 @@ export default function Chat() {
+If you don't need the input to be controlled (e.g., no live validation or display elsewhere), you can skip state entirely and read the DOM value directly via a ref.
+
+
+
+```js
+import { useRef } from 'react';
+
+export default function Chat() {
+ const inputRef = useRef(null);
+
+ function handleSend() {
+ setTimeout(() => {
+ alert('Sending: ' + inputRef.current.value);
+ }, 3000);
+ }
+
+ return (
+ <>
+
+
+ >
+ );
+}
+```
+
+
+
+
diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md
index be3a9ac2cdb..4c4c59c3f00 100644
--- a/src/content/learn/writing-markup-with-jsx.md
+++ b/src/content/learn/writing-markup-with-jsx.md
@@ -74,7 +74,7 @@ Suppose that you have some (perfectly valid) HTML:
src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
->
+/>
- Invent new traffic lights
- Rehearse a movie scene
@@ -106,7 +106,7 @@ export default function TodoList() {
src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
- >
+ />
- Invent new traffic lights
- Rehearse a movie scene
@@ -145,7 +145,7 @@ For example, you can use a `
`:
src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
- >
+ />
@@ -162,7 +162,7 @@ If you don't want to add an extra `
` to your markup, you can write `<>` and
src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
- >
+ />