React state

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