diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index 6d4f55763fa..70049e58e27 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -175,7 +175,7 @@ function Cup({ guest }) { } export default function TeaGathering() { - let cups = []; + const cups = []; for (let i = 1; i <= 12; i++) { cups.push(); } @@ -245,7 +245,7 @@ Rendering is a *calculation*, it shouldn't try to "do" things. Can you express t ```js src/Clock.js active export default function Clock({ time }) { - let hours = time.getHours(); + const hours = time.getHours(); if (hours >= 0 && hours <= 6) { document.getElementById('time').className = 'night'; } else { @@ -307,7 +307,7 @@ You can fix this component by calculating the `className` and including it in th ```js src/Clock.js active export default function Clock({ time }) { - let hours = time.getHours(); + const hours = time.getHours(); let className; if (hours >= 0 && hours <= 6) { className = 'night'; @@ -606,14 +606,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: Prevent the memory from growing forever while you read docs. // We're breaking our own rules here. @@ -702,14 +702,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: Prevent the memory from growing forever while you read docs. // We're breaking our own rules here. @@ -770,7 +770,7 @@ Alternatively, you could create a _new_ array (by copying the existing one) befo ```js src/StoryTray.js active export default function StoryTray({ stories }) { // Copy the array! - let storiesToDisplay = stories.slice(); + const storiesToDisplay = stories.slice(); // Does not affect the original array: storiesToDisplay.push({ @@ -794,14 +794,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: Prevent the memory from growing forever while you read docs. // We're breaking our own rules here.