React State

State represents dynamic values of the app
Update state to update app visuals or logic
If state is updated, components under that state try to re-render

What is React state?

const App = () => {
  const [brickColor, setBrickColor] = useState("red");
    
  return (
    <div className="brick" 
      style={{ background: brickColor }} 
    />
  )
}

useState basics

Brick colour initial value is red
Brick colour is expected to change
setBrickColor can be used to update brickColor which in turn updates the colour of the div ( next slide )

const App = () => {
  const [brickColor, setBrickColor] = useState("red");
    
  return (
    <div className="brick" 
      style={{ background: brickColor }} 
      onClick={() => setBrickColor("blue")} 
    />
  )
}

useState - update state

When the div is clicked, use setBrickColor to update brickColor
Result: brick background colour changes from red to blue on click

useState - representing multiple values

Many choices, depending on app needs e.g.
- Multiple useState
- One useState with array or object
In the Brick App, there are 24 different colours, therefore we need to store 24 different values in the state

// Multiple useState
const App = () => {
  const [brickColorOne, setBrickColorOne] = useState("red");
  const [brickColorTwo, setBrickColorTwo] = useState("red");
  // ... 22 other useState
  
  
  return (
    <>
      <div className="brick" 
        style={{ background: brickColorOne }} 
        onClick={() => setBrickColorOne("blue")} 
      />
      <div className="brick" 
        style={{ background: brickColorTwo }} 
        onClick={() => setBrickColorTwo("blue")} 
      />
      // ... 22 other divs
    </>
  )
}

useState - representing multiple components

Choice: Multiple useState for Brick App
- Cannot scale in this case i.e. there would be 24 useState altogether: 12 for players, 12 for computers

// One useState for each set of colours
const App = () => {
  // All player brick colours are stored in one array
  // Currently 2 elements, meaning 2 bricks.
  // Can easily scale this array to the number of bricks we want the player to have 
  // e.g. 12, 24, 100, etc.
  const [playerBrickColors, setPlayerBrickColors] = 
        useState(["red", "red", /* 10 other values */]);

  // All computer brick colours are stored in one array
  const [computerBrickColors, setComputerBrickColors] = 
        useState(["red", "red", /* 10 other values */ ]);

  return (
    <>
      <div className="brick" 
        style={{ background: playerBrickColors[0] }} 
        onClick={() => { 
          const newBrickColors = [...playerBrickColors];
          newBrickColors[0] = "blue";
          setPlayerBrickColors(newBrickColors)
        }} 
      />
      // ... the rest of the divs below
    </>
  )
}

useState - representing multiple components

one useState to group all player brick colors
one useState to group all computer brick colours

// One useState for each set of colours
const App = () => {
  const [playerBrickColors, setPlayerBrickColors] = useState(["red", "red"]);
  const [computerBrickColors, setComputerBrickColors] = useState(["red", "red"]);
    
  return (
    <>
      {playerBrickColors.map((playerBrickColor, index) => {
        return (
          <div className="brick" 
            style={{ background: /* 🌟 What should be here? */ }} 
            onClick={() => { 
              /* 🌟 What should be here? */
            }} 
          />
        )
      }}}
      // ... computer bricks below
    </>
  )
}

useState - representing multiple components

We don't want to manually type out 24 div blocks
Use .map to recursively render many bricks, based on the playerBrickColors and computerBrickColors

React state

React state

Eddy Nguyen

More from Eddy Nguyen