codex-lv3-may-2025

Level Navigation: 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18⚡

19

Level 12: Extract Stats Component with Props

User Story: As a developer, I want to organize my code into reusable components so that my application is easier to maintain and understand.

What You’ll Do

Extract the stats display into its own component that accepts props for score, lives, and styling.

Instructions

• Create a new Stats component above the App component
• The component should accept score, lives, and style as props
• Move the stats div JSX into this component
• In App, replace the stats div with <Stats score={score} lives={lives} style={statsStyle} />
• Test that the stats display still works correctly

💡 Code Hints

Need help with components and props? Check out these snippets:

Show Me: Stats component definition

function Stats({ score, lives, style }) {
  return (
    <div className="stats" style={style}>
      Score: {score} Lives: {lives}
    </div>
  )
}

Show Me: using the Stats component in App

function App() {
  // ... all your state and functions ...
  
  const statsStyle = {
    backgroundColor: "brown",
    color: "whitesmoke"
  }
  
  // ... conditional styling logic ...
  
  return (
    <>
      <Stats score={score} lives={lives} style={statsStyle} />
      <div className='orchard-background' onClick={missTarget}>
        { score < 100 ? 
          <div className="apple-target" onClick={clickTarget} style={appleStyle}></div>
          : <h1 className="win"> You Win!</h1>
        }
      </div>
    </>
  )
}

Show Me: complete file structure

import { useState } from 'react'
import './App.css'

function randomNumber(a, b) {
  return Math.floor(Math.random() * (b - a) + a);
}

// NEW: Stats component
function Stats({ score, lives, style }) {
  return (
    <div className="stats" style={style}>
      Score: {score} Lives: {lives}
    </div>
  )
}

function App() {
  // ... rest of App component
}

export default App

✅ Check

1. Stats should still display correctly
2. Colors should still change based on score
3. No console errors about missing props
4. The game should function exactly as before
5. Your code should feel more organized

Understanding Props:

• Props are like function parameters for components
• They pass data from parent to child
• Use destructuring { score, lives } to extract props
• Props are read-only (never modify them directly)

Why Extract Components?

• Reusability: Use the same component in multiple places
• Organization: Each component has a single responsibility
• Testing: Easier to test small components
• Readability: Clearer code structure

---